Firefox Anomaly

How do we get to the screen above from the link given?

I've set up a username and password that you can use to access the display above.  Go to www.sleepamazing.com/chiropractic and type in "test" as the username, and "test1234" as the password.

Thanks for the help!

Error: this[name] is null
Source File: https://www.sleepamazing.com/chiropractic/wp-includes/js/ExtJS/ext-all-debug.js
Line: 16478

can you add

alert(name) here:

createElement : function(name, pnode){
        if(this[name]){
            pnode.appendChild(this[name].dom);
            return;
        }
alert(name)		
 
		if(name === 'bwrap' || this.elements.indexOf(name) != -1){
            if(this[name+'Cfg']){
                this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']);
            }else{
                var el = document.createElement('div');
                el.className = this[name+'Cls'];
                this[name] = Ext.get(pnode.appendChild(el));
            }
            if(this[name+'CssClass']){
                this[name].addClass(this[name+'CssClass']);
            }
            if(this[name+'Style']){
                this[name].applyStyles(this[name+'Style']);
            }
        }
    },

Select allOpen in new window

Actually try this:

createElement : function(name, pnode){
  if(this[name]){ // if it already exists, appendChild and leave
    pnode.appendChild(this[name].dom);
    return;
  }
// here there is NO this[name]
var where = "Not known";
  try{
    if(name === 'bwrap' || this.elements.indexOf(name) != -1){
      if(this[name+'Cfg']){
        where = "Ext.fly";
        this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']); // create it
      }else{
        var el = document.createElement('div');
        el.className = this[name+'Cls'];
        where = "Ext.get";
        this[name] = Ext.get(pnode.appendChild(el)); // create it and get it (fails?)
      }
      if(this[name+'CssClass']){
        where = "addClass";
        this[name].addClass(this[name+'CssClass']); // assumes that there IS a this[name]
      }
      if(this[name+'Style']){
        where = "applyStyles";
        this[name].applyStyles(this[name+'Style']); // assumes that there IS a this[name]
      }
    }
  }
  catch(e) {
    alert(name+' - '+where+':'+e.message)
  }
},

Select allOpen in new window

Nice bit of debugging code!  The alert is:

                      body - applyStyles:this[name] is null

Actually I had placed an alert(name) there before and observed its behavior.  In IE 8 it cycles through the following messages three times: header, bwrap, tbar, body, bbar, and footer.  In Firefox it cycles through one time and stops on "body" the second time through.  However, since I am new to firebug, I have no way of telling whether there is any way of tracing the calls up the ladder.

So what happens to your application if you take my code and simply comment out the content of the catch

catch(e) {
//    alert(name+' - '+where+':'+e.message)
  }


Alternatively try changing

if(this[name+'Style']){
  this[name].applyStyles(this[name+'Style']); // assumes that there IS a this[name]
}

to

if(this[name+'Style']){
  if (this[name] == null) this[name] = document.body;
  this[name].applyStyles(this[name+'Style']); // assumes that there IS a this[name]
}
 

When debugging I set:

in  Ext.Panel    body should refer to   Ext.get(document.body);


I dont know why its missing? Maybe in configuration you missed something ?
 You could try this:

in line 16343 of ext-all-debug.js

just add:

body: Ext.get(document.body)


But I cant guarantee that it will work :(    at least this is a problem but dont know why its null

mplungjan:
Commenting out the alert(name+' - '+where+':'+e.message) resulted in the following error report in firebug:

Components is not defined
initEl()(null)ext-all-debug.js (line 29708)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30074)
render()("searchWrapper1", undefined)ext-all-debug.js (line 12847)
render()()ext-all-debug.js (line 14511)
createSearchForm()livesearch.js (line 104)
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this.id = this.el.id || Ext.id();
ext-all-debug.js (line 29708)
this.el is null
[Break on this error] this.id = this.el.id || Ext.id();

For that which you designated as the alternative, you requested a change in the original coding so I am assuming that you wanted the debugging code removed before I made that change.

This change results in the following errors:

Components is not defined
createElement()("body", div.x-panel-mc)ext-all-debug.js (line 16479)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 16533)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30062)
render()("searchWrapper1", undefined)ext-all-debug.js (line 12847)
render()()ext-all-debug.js (line 14511)
createSearchForm()livesearch.js (line 104)
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this[name].applyStyles(this[name+'Style']);
ext-all-debug.js (line 16479)
this[name].applyStyles is not a function
[Break on this error] this[name].applyStyles(this[name+'Style']);

wilq32:

Adding "body: Ext.get(document.body)," to line 16343 of ext-all-debug.js resulted in the following error:

createElement()("body", div.x-panel-mc)ext-all-debug.js (line 16478)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 16532)
onRender()(Object dom=div#searchWrapper1 id=searchWrapper1, null)ext-all-debug.js (line 30061)
render()("searchWrapper1", undefined)ext-all-debug.js (line 12847)
render()()ext-all-debug.js (line 14511)
createSearchForm()livesearch.js (line 104)
(?)()()livesearch.js (line 389)
(?)()()ext-all-debug.js (line 1431)
[Break on this error] this[name].applyStyles(this[name+'Style']);
ext-all-debug.js (line 16478)
this[name] is null
[Break on this error] this[name].applyStyles(this[name+'Style']);

Thanks guys for all your help!

you are welcome.

I think you need to try a newer version of EXT or ask the same question in an EXT forum

yes thats definetly good approach:)

Sorry fellas, I was hoping to find some good Ext JS experts here, I have a similar question posted in the Ext JS forum and I am getting very poor response.  What I think I need is a good browser expert, because as I say, this problem only occurs in Firefox.  It works perfectly well in IE 8, Safari and Mobile Safari.  I was hoping that there might have been something lilke a CSS solution, like a browser hack.  To be honest with you, I really don't think this is a javascript problem, otherwise why would it work so well in other browsers?

I suspect that somehow the browser is doing something that is interfering with the CreateElement function as this[name] is returning null.

So, are you guys going to give up on me?

You know, on second thought, there has to be something in the programming of my website that is doing this.  Firefox will render the grid perfectly fine in WordPress.

Don't you experts know of any debugging techniques that could help me to get to the heart of the matter?

Try this instead of

if(this[name+'Style']){
 this[name].applyStyles(this[name+'Style']);
}

if(this[name+'Style']){
 if (!this[name]) this[name] = Ext.get(document.body);
 this[name].applyStyles(this[name+'Style']); 
}

Select allOpen in new window

WOW!  You touched on something, alright!  You got the grid to render, but it did a wierd thing to the page (see attached screenshot).  Are you on to something?
screenshot.jpg

Just dont ask :D it seems that there is style bodyStyle  set  to define width of this element. Just change line to this and it should work

if(this[name+'Style']){
 if (!this[name]) this[name] = Ext.get(document.body);
     else this[name].applyStyles(this[name+'Style']); 
}

Select allOpen in new window

Well, I think the strange page display is because the javascript is not executing properly.  I made the change and there was no visible effect.  Plus I noticed that the livesearch field and textbox are now located at the top of the screen, off the page, instead of directly above the grid (you can see the working example of this and how it should look at https://www.sleepamazing.com/associates/).  Again, I think the proper element is not being created for some reason (why it creates just fine in other browsers is beyond me).

I appreciate you lending your expertise at javascript to this problem.  You are being a real help!

Hey, just a quick question.  Are you aware of any issues in Firefox and the appendChild method.  Like I have noticed in IE sometimes appending a child to an existing div does not work.  Sometimes you have to create a whole new div, transfer the contents from the old div over to the new, and then append a child to that div.  Do you think something similar might be happening here?

Nope there was no such a problem in Firefox:( I still debugging your code

Thanks!  You are the greatest!

you create 3 simple Panels   that you specify width for them so Ext setting that width. So first example was ok because it was narrow, and it uses exaly 715 width. Here it  does not work because of setting width.

Ok you changed it ;) I see but search is on top. I think that I know what is a problem ;)

Woohoo!  You are a genius!  Display is now looking great, just still have the problem with the floating search box and label.

Wow, how do you see my responses so fast?  There is a delay before I see yours.

Ok I have to check something... It seems that is somehow a strange firefox behaviour. Now do this:

go to line: 16472 : this[name] = Ext.get(pnode.appendChild(el));

and change to those lines:

var added = pnode.appendChild(el);
var returned = Ext.get(added);
this[name] = returned;

Select allOpen in new window

No i noticed search problem after I sent you a fix so I wrote about it before you do ;)

There has to be some bug with this. I tried execute the same line when debugger was on it and everything then goes well. But if I go over it using "next statement" it just go out of function. Thats pretty strange hmm.

And to be honest I never saw so strange bug in firefox :)

Ha!  That's great.  Listen, there seems to be a problem because now the page will not load.

Yeah, neither have I.  Firefox is supposed to be the well behaved browser.

16481 :  if (!this[name]) this[name] = Ext.get(document.body);

change to:


if (!this[name]) return;

ok Can you revert all changes there ? because now it brokes Ext somehow ;)

can you remove  bodyStyle:'padding:5px 5px 0',    from all FormPanel  configuration in livesearch.js  ??

Hi there!
Sorry for the delay, I was experiencing problems with my internet connection.  I'm still running a little slow, but it appears I should be able to continue working.  When you say revert all changes, do you mean everything you asked me to do, or just the last bits?

Wow, sorry again for the delay.  Just when I thought everything was fixed, my modem crashed.  I had to run out and buy another one.  I am really sorry.  I hope you are still out there to help me.

Looks like the bodyStyle:'padding:5px 5px 0', is required.  When I take them out everything returns to the way it was at the beginning.

remove it please I need to check something ;) and then  revert also every change in line 16481

Oh wonderful! You are back!  Thank you so much for your patience.

Per your request, I have commented out the bodyStyles.  Let me know when you want me to revert line 16481.

ok can you remove them now ?:)

Done!

Wow, so you think this is an Ext JS bug, and not an issue with Firefox?  That's awesome.  I really appreciate the expert help.  I can tell you are operating on a level far beyond me, and I could not resolve this issue without you.

Do you know if there is any way to increase the points on this question beyond the 500?

I've made the changes per your request, and restored all the bodystyles.

Ok after this changes it looks ok - does it ?


And no - 500 is max, but of course you can always buy me a beer haha ;P

OMG!!!  YOU DID IT!!!  PERFECT RENDERING, IE8, SAFARI, MOBILE SAFARI AND FF!

THANK YOU, THANK YOU, THANK YOU!!!!!

You are truly a GENIUS!!!  I would love to buy you a beer!

Seriously, I can't thank you enough.  If there is ever anything I can do for you, please do not hesitate to call.  You can contact me at craig a omniunlimited.com (substitute the a for the at sign).

Once again, thanks a million!

wilq32, you are a credit to EE.  I truly could not have done this without you.  I will be eternally grateful.

Great you solved it...

See... you gave up too easily! ;)

I have a life ;) (and I live in CET)

Great!  CET is perfect for my all night work fests.  Maybe you can help with the next problem I encounter?

As long as I do not have to debug EXT or other frameworks.  I prefer writing and understanding my own code ;)

OK.  Good to know.  Thanks!

i dont like to debug frameworks also :P but this was looking not so hard, but in fact it was uh :)  

You rock!

Yeah, well done Wilq

Aaarrgh!!!  I can't believe this!!!  I have ANOTHER problem with FIREFOX!!!

Guys, you have been so great.  Is there any way you can take a look at this and see if you could help me?

The question is posted at https://www.experts-exchange.com/questions/24425827/Another-Firefox-Problem.html.

Thanks a million!