Morten
22 Mar 2007, 12:56 PM
Hi
I have been using yui-ext for a short while and have run into a bug with the use of tabs and dialogs in Internet Explorer 6 (it works in FireFox). The modal dialog cannot be selected when activated in IE. The following code produces the bug:
<html>
<head>
<title>Hello World Dialog/Tab Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script language="javascript">
var HelloWorld = function(){
var dialog;
return {
init : function() {
Ext.get('show-dialog-btn').on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){
dialog = new Ext.BasicDialog("hello-dlg", {width:500, height:300, modal:true });
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show();
}
};
}();
var tabs = {
init : function(){
var tabs = new Ext.TabPanel("tabs");
tabs.addTab("Test", "Test");
tabs.addTab("Test2", "Test");
tabs.activate("Test");
}
};
Ext.EventManager.onDocumentReady(tabs.init, tabs, true);
Ext.onReady(HelloWorld.init, HelloWorld, true);
</script>
</head>
<body>
<input type="button" id="show-dialog-btn" value="Hello World" />
<div id="tabs">
<div id="Test" class="tab-content">
Tab1
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Hello Dialog</div>
<div class="x-dlg-bd">Hello World!</div>
</div>
</div>
<div id="Test2" class="tab-content">
Tab2
</div>
</div>
</div>
</body>
</html>
The workaround is simple (just don't stick the dialog in the tab or don't use modal mode), but it is less than ideal if, for instance, one wants to use the setUrl functionality of tabItems and the dialog only makes sense on a particular tab.
Btw. yui-ext is a very impressive piece work for a single person to be doing - best of luck with it.
Thanks,
Morten
I have been using yui-ext for a short while and have run into a bug with the use of tabs and dialogs in Internet Explorer 6 (it works in FireFox). The modal dialog cannot be selected when activated in IE. The following code produces the bug:
<html>
<head>
<title>Hello World Dialog/Tab Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script language="javascript">
var HelloWorld = function(){
var dialog;
return {
init : function() {
Ext.get('show-dialog-btn').on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){
dialog = new Ext.BasicDialog("hello-dlg", {width:500, height:300, modal:true });
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show();
}
};
}();
var tabs = {
init : function(){
var tabs = new Ext.TabPanel("tabs");
tabs.addTab("Test", "Test");
tabs.addTab("Test2", "Test");
tabs.activate("Test");
}
};
Ext.EventManager.onDocumentReady(tabs.init, tabs, true);
Ext.onReady(HelloWorld.init, HelloWorld, true);
</script>
</head>
<body>
<input type="button" id="show-dialog-btn" value="Hello World" />
<div id="tabs">
<div id="Test" class="tab-content">
Tab1
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Hello Dialog</div>
<div class="x-dlg-bd">Hello World!</div>
</div>
</div>
<div id="Test2" class="tab-content">
Tab2
</div>
</div>
</div>
</body>
</html>
The workaround is simple (just don't stick the dialog in the tab or don't use modal mode), but it is less than ideal if, for instance, one wants to use the setUrl functionality of tabItems and the dialog only makes sense on a particular tab.
Btw. yui-ext is a very impressive piece work for a single person to be doing - best of luck with it.
Thanks,
Morten