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 补充:

官方的另一种解法:

http://extjs.com/forum/showthread.php?p=351546#post351546

评论

1 楼 xiexifeng113 2010-10-17  

现在的ext没有这个问题了。可是新出来的问题又和这个一样了。
帮忙看看我的那个问题http://www.iteye.com/problems/51798