PDA

View Full Version : IE Error with Ext.get



chalu
12 Sep 2008, 10:08 PM
I am trying to fadeout a 'loading indicator' image in my application, it works except in IE where it complains that the return of Ext.get('...') call is null, here is what I am doing :


Ext.Ajax.request({
url: appBaseParams.serviceLink,
params: {mode: 'init', port: appBaseParams.servicePort},
method: 'POST',
success: function(o){
var tasks = Ext.decode(o.responseText);
if(tasks instanceof Array){
for(var n = 0; n < tasks.length; ++n){
var task = tasks[n];
buildIt(task, nav, clickListener);
}
}else{
buildIt(tasks, nav, clickListener);
}
finalizeLoading({});
},
failure: function(o){
finalizeLoading({
callback: function(){
Ext.Msg.alert('Init Failure', appBaseParams.serviceNA);
}
});
}
});
};

var finalizeLoading = function(cfg){
Ext.get('loading').remove(); // this is where we get errors in IE.
Ext.get('loading-mask').fadeOut({
remove:true, useDisplay:true,
endOpacity:0, easing:'easeOut',
duration: cfg.delay || 0.5,
callback: cfg.callback
});
};


My html looks like this :


<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator">
// a flash animation script comes in here
</div>
</div>


You can see that 'loading' and 'loading-mask' elements exist in the document, but in IE the error dialog says Ext.get('...') is null or not an object.

Of much worry to me is that I also get an error (still in IE) pointing to line 19115 (of course IE does not tell you the Js file having the error), I guessed ext-all-debug and it turned out to be the autoSizeTabs function in Ext.TabPanel, I commented the area around where IE was complaining from (I never trust IE go give me accurate error lines) and the error goes away :


autoSizeTabs : function(){
var count = this.items.length;
var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
var ow = this[ce].dom.offsetWidth;
var aw = this[ce].dom.clientWidth;

if(!this.resizeTabs || count < 1 || !aw){ return;
}

var each = Math.max(
Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth),
this.minTabWidth
);
this.lastTabWidth = each;
var lis = this.stripWrap.dom.getElementsByTagName('li');
for(var i = 0, len = lis.length-1; i < len; i++) { var li = lis[i];
//var inner = li.childNodes[1].firstChild.firstChild;
//var tw = li.offsetWidth;
//var iw = inner.offsetWidth;
//inner.style.width = (each - (tw-iw)) + 'px';
}
}


Am I missing something :-/:-/

Animal
13 Sep 2008, 1:25 AM
How does that mask get put there? I know IE < 8 is a pain to debug, but it could be a timing issue.

Have you tried installing IE8 on a test machine, or in another login ID on your machine if you are on Vista, and debugging using IE8's Developer Tools? It's not Firebug, but it helps a lot.

13 Sep 2008, 1:39 AM
How does that mask get put there? I know IE < 8 is a pain to debug, but it could be a timing issue.

Have you tried installing IE8 on a test machine, or in another login ID on your machine if you are on Vista, and debugging using IE8's Developer Tools? It's not Firebug, but it helps a lot.

Although it's not clear, he's using the Ext Docs loading mask it seems where the html is loaded immediately.

Chalu,

are you firing your Ext code within Ext.onReady()?

chalu
13 Sep 2008, 7:59 AM
Yeah, my call are wraped within Ext.onReady.

mjlecomte
13 Sep 2008, 8:17 AM
Just a reminder, but you've run your base code through jslint? I've seen haphazard IE errors reported all on account of stray commas.

Animal
13 Sep 2008, 8:22 AM
Good point. Running on Opera also uncovers some problems that FF tolerates.

chalu
13 Sep 2008, 1:20 PM
Just a reminder, but you've run your base code through jslint? I've seen haphazard IE errors reported all on account of stray commas.
I develop with Aptana studio and I have set it's JavaScript validator to use JSlint, I am trying to see if I have things like a trailing comma, but it also flags .7 as an error, expecting 0.7 instead and complains when I use variable == true instead of variable === true. Maybe I'm wrong but in ajax responses for instance response === true doesn't always evaluate to true even when the value is true. Will keep in touch. Thanks

mjlecomte
13 Sep 2008, 4:38 PM
I'd double check with jslint. I use Aptana Studio also and it doesn't always catch comma problems, especially as the file gets large or if you have too many files open. Or just open ext-all-debug with another file and you may see problems....etc. Anyway, if you know you have problems with IE I'd check with another source.

chalu
14 Sep 2008, 2:24 AM
Any hint about using JSlint from the command line, my internet access is intermittent so I can't rely on verifying .js files online. I am looking at rhino. Thanks