PDA

View Full Version : Internet Explorer + Ext.Window = Fail?



Lovecannon
24 Nov 2007, 5:09 PM
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:

<div id="container">
<div id="content">
<div id="content-win" class="x-hidden">
<div class="x-window-header">Fuzzbox</div>
<div id="main-tabs">
<div class="x-tab" title="Content">
<div class="cont">Test</div>
</div>

</div>
</div>
</div>
<div id="login" class="x-hidden">
<div class="x-window-header">Login!</div>
<div id="login-tabs">
<div class="x-tab" title="Login">
<div class="cont">Test</div>
</div>
<div class="x-tab" title="Register">
<div class="cont">Test 2</div>
</div>
</div>
</div>
</div>

tryanDLS
24 Nov 2007, 5:58 PM
Please post your code in CODE tags. If it works in FF, but not IE check for extra commas.

Lovecannon
24 Nov 2007, 6:40 PM
Well, I compressed my ext-all.js with Javascript Compressor(javascriptcompressor.com), would that be a problem?

Lovecannon
24 Nov 2007, 6:58 PM
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'

tryanDLS
24 Nov 2007, 7:12 PM
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.

Lovecannon
25 Nov 2007, 10:11 AM
Thank you! That fixed it, I removed the this statement, and it worked in IE :D