PDA

View Full Version : Modal BasicDialog never enables



froamer
22 Oct 2007, 12:48 PM
Hi, strange one this. I have a BasicDialog which is modal. As it opens is disables the page as it should, but in IE7 the dialog itself remains disabled even once it is open.

IE7
http://www.4dsites.com/downloads/external/Ext/model_dialog_IE7.gif

FireFox
http://www.4dsites.com/downloads/external/Ext/model_dialog_FF.gif

Here's the code that defines the dialog...

var UploadDialogUI = function(){

// return a public interface
return {
init : function(){
},

showDialog : function(showBtn,extensions,subfolder,maxsize){
if(!uploadDialog) {
uploadDialog = new Ext.BasicDialog("upload_form", {
width:500,
height:300,
shadow:true,
minWidth:500,
minHeight:300,
modal: true,
autoScroll: false,
proxyDrag: true
});
uploadDialog.addKeyListener(27, uploadDialog.hide, uploadDialog);
uploadDialog.addButton('Close', uploadDialog.hide, uploadDialog);
}
Ext.get('uploadFrame').dom.src="/site/uploadform.html?si_user_id="+si_user_id+"&extensions="+extensions+"&subfolder="+subfolder+"&maxsize="+maxsize;
uploadDialog.show(showBtn.dom);
}
};
}();

And here is the code that opens it...

UploadDialogUI.showDialog(Ext.get('logoButton'),'gif,jpg,png','logo',200);


Has anyone got a clue as to what is going on, or perhaps could give me a pointer how I can debug this? Many thanks!

tryanDLS
22 Oct 2007, 12:56 PM
Are you rendering it to a direct child of the body, per the doc?

froamer
22 Oct 2007, 2:05 PM
Hi tryanDLS, thanks for replying.

Yep, here's the DIV...

<div id="upload_form" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Upload a File</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="Upload Files">
<div class="inner-tab" style="overflow: hidden;">
<iframe id="uploadFrame" style="width:100%;height:90%;overflow: hidden;" src="uploadform.html" width="350" height="280" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
</div>


This is a child of the body of the main document and the HTML validates.

froamer
22 Oct 2007, 10:57 PM
If I inspect with the IE Developer Toolbar plug-in, it looks like the mask DIV (<div class=ext-dlg-mask id=ext-gen497>) is never destroyed or hidden. If use the IE Development Toolbar to set its style to display:none then my dialog continues as it should.

So it looks like the code that hides the dialog mask is failing or not running. I don't get any JavaScript errors reported by IE. Problem is I do not have a debugger for IE so I can't track it down in the Ext code.

Does this help, or do you know of a debugger for IE7?

tryanDLS
23 Oct 2007, 9:57 AM
Does this help, or do you know of a debugger for IE7?

There are threads discussing IE debuggers, MS Script Debugger, Visual Studio, Firebug Lite, for starters.

23 Oct 2007, 10:14 AM
firebug for IE? :D gotta look that one up!

froamer
25 Oct 2007, 8:28 AM
Thank you all for the IE debugging tips, I've loaded up a few developer plug-ins but it looks like I need to go the Visual Studio route to actually debug anything.

For now I have made the dialog modal: false to avoid rather than fix the issue. Other dialogs run OK modal on the same page, so I am guessing it is some type of timing issue rather than incompatible scripts or html. When I get around to upgrading to Ext 2 I'll revisit this.