ExtJS Menu嵌套Combo时,下拉菜单被遮盖的bug的解决方法...
2009-09-06补充:
该文章只解决了combo下拉框被遮盖的问题,但是如果选择como的某项,或者点击下拉菜单就会自动隐藏menu
请移步查看后续文章:
ExtJS Menu嵌套combo时,自动隐藏/遮盖等bug的解决方案
http://atian25.iteye.com/blog/441476
问题很简单, 在Menu里面加入一个Combo后,下拉菜单被遮住了...
示意图:
示例代码:
function testSplitButton(){
var combo = new Ext.form.ComboBox({
fieldLabel: 'test',
store: ['x','xx','xxx','xxxx','xxxxx','xxxxx'],
mode: 'local'
});
var simple = new Ext.FormPanel({
labelWidth: 75,
frame:true,
width: 350,
height:100,
items: [combo],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
new Ext.SplitButton({
renderTo: document.body,
text: 'Options',
menu: new Ext.menu.Menu({
//2.2写法是 items:[new Ext.menu.Adapter(simple)]
items: [simple]
})
});
}
官方解答:
We're looking at possible plans to automate z-indexing in a future release, however there's so many different combinations that you can apply. At this point in time we aren't considering it a bug, you would need to apply a custom z-index.
Marking as closed.
http://extjs.com/forum/showthread.php?t=75207
所以只好自己的fix,方法如下:
1.添加样式:
.fixedZIndex{
//由于menu里面的layer的z-index是15000,则这里大于15000即可..
z-index: 21000;
}
2.对出问题的combo指定下拉列表的样式:
function testSplitButton2(){
var combo = new Ext.form.ComboBox({
fieldLabel: 'test',
store: ['x','xx','xxx','xxxx','xxxxx','xxxxx'],
mode: 'local',
//指定下拉列表的z-index
listClass:'fixedZIndex'
});
var simple = new Ext.FormPanel({
labelWidth: 75,
frame:true,
width: 350,
height:100,
items: [combo],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
new Ext.SplitButton({
renderTo: document.body,
text: 'Options',
menu: new Ext.menu.Menu({
items: [simple]
})
});
}
还有其他的规避方法就不多说了,如把panel变为floating和hidden的,然后自己监听事件。
09.07.24 补充:
官方的另一种解法: