Friday, January 9, 2009

Internet Explorer + Ext.Window = Fail?

Well, I have a central pre made layout, and in a big open area, I use Ext.Window to create content boxes, and they work great in Firefox, but they dont work at all in IE, and IE says that Ext is not defined, and that style is not an object. Anyone know a fix? Ive tried setting absolute values for the height-width in the CSS, and it still doesnt show up. My code for creating the boxes are like this:

Ext.onReady(function() {
var win;
if(!win){
win = new Ext.Window({
el:'content-win',
closable: false,
collapsible: false,
resizable: false,
renderTo: 'content',
layout:'fit',
width:650,
height:300,
closeAction:'hide',
plain: true,
buttons: [{
text: 'Default position',
handler: function(){
windowdefault(win, null);
}
}],
items: new Ext.TabPanel({
el: 'main-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
})
});
}
win.setPosition(15, 25);
win.show(this);
var login;
if(!login){
login = new Ext.Window({
el:'login',
closable: false,
collapsible: true,
resizable: false,
renderTo: 'content',
layout:'fit',
width:200,
height:250,
closeAction:'hide',
plain: true,
buttons: [{
text: 'Default position',
handler: function(){
windowdefault(null, login);
}
}],
items: new Ext.TabPanel({
el: 'login-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
})
});
}
login.setPosition(700, 25);
login.show(this);

And my code for the HTML is:

Fuzzbox

Well, I compressed my ext-all.js with Javascript Compressor(javascriptcompressor.com), would that be a problem?

Well, I checked my code, theres no extra commas, and I even copied examples from the site, like the example for the Hello Window, and the only way that example worked on that is if the button was used to make the window, if I removed the buttons control of it, it wouldnt work in IE, but worked in Firefox.

Heres the code before I removed the button control:
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,

items: new Ext.TabPanel({
el: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
And here is it after I removed the buttons control:
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

if(!win){
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,

items: new Ext.TabPanel({
el: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});

The error I get in IE is 'Style is null or not an object'

Please post your code in CODE tags. If it works in FF, but not IE check for extra commas.

It doesn't work b/c your code is not valid. You need to use a debugger and understand what's going on. By removing the handler, you've changed the value of 'this' in show call. If you read the doc for that function, you'll see that the arg is used for animation. Since 'this' is no longer the button, and is now probably the window, the code is failing. This is causing a exception to be thrown in IE, while whatever is failing, is not a severe exception in FF.

Thank you! That fixed it, I removed the this statement, and it worked in IE :D

#If you have any other info about this subject , Please add it free.#

Posted by wktd |

Internet Explorer + Ext.Window = Fail?

Recent Posts

Archives

Categories

Blog roll

Meta