PDA

View Full Version : In IE8,the menu does not close automatically!



liduqun
5 Jun 2013, 7:35 PM
In the attachment test.zip,there are tow files: test02.htm and default.htm.
The test02.htm file has the following script:
<script type="text/javascript">
Ext.require('Ext.ux.IFrame')
Ext.onReady(function ()
{
var me = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 600,
height: 500,
header: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'menu1',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'menu11',
handler: function ()
{
me.removeAll();
me.add({
xtype: 'uxiframe',
src: "default.htm",
loadMask: false
})
}
},
{
xtype: 'menuitem',
text: 'menu12',
handler: function ()
{
me.removeAll();
me.add({
xtype: 'uxiframe',
src: "default.htm",
loadMask: false
})
}
},
{
xtype: 'menuitem',
text: 'menu13',
handler: function ()
{
me.removeAll();
me.add({
xtype: 'uxiframe',
src: "default.htm",
loadMask: false
})
}
}
]
}
}
]
}
})
})
</script>

After it rendered, if I have not click the menu item, the menu will close automaticaly when I clicks outside it.
BUT after I click the menu item(eg. menu12),the panel load the page default.htm with a Ext.ux.IFrame component, and I click the button 'menu1',the menu open, and DOES NOT close when I click ousite it!

This bug only occures in IE8, not in chrome, nor in IE10.

glopes
5 Jun 2013, 10:13 PM
Instead of using the ux.Iframe, try using the standard container. Replace your code with the following and it should work on IE8:



<script type = "text/javascript" >
Ext.onReady(function () {
var me = Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 600,
height : 500,
header : {
xtype : 'toolbar',
items : [{
xtype : 'button',
text : 'menu1',
menu : {
xtype : 'menu',
items : [{
xtype : 'menuitem',
text : 'menu11',
handler : function () {
me.removeAll();
me.add({
xtype : 'container',
loader : {
url : 'Default.htm',
autoLoad : true
}
})
}
}, {
xtype : 'menuitem',
text : 'menu12',
handler : function () {
me.removeAll();
me.add({
xtype : 'container',
loader : {
url : 'Default.htm',
autoLoad : true
}
})
}
}, {
xtype : 'menuitem',
text : 'menu13',
handler : function () {
me.removeAll();
me.add({
xtype : 'container',
loader : {
url : 'Default.htm',
autoLoad : true
}
})
}
}
]
}
}
]
}
})
})
</script>

liduqun
5 Jun 2013, 11:50 PM
But if in the page loaded,there are some js scripts to run when the page loaded, the script would not run in such manner!