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
- 大小: 9.3 KB
分享到:
相关推荐
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
Extjs 下拉菜单实现拼音输入进行检索
Extjs 下拉列表
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
extjs4.2 分页combo动态条数 源码,不懂的加群
extjs下拉树
下拉(条件)搜索实例extjs4.2(亲测可用).在前辈的基础上增加了php后台数据的调取整合和下拉搜索的联动
ExtJs的页面布局、界面设计的源码 直接运行index.html可看效果,源码在里面
本文实例为大家分享了Extjs实现下拉树效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet...
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
Selenium识别Extjs控件的解决方法整理.pdf
前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区
NULL 博文链接:https://qixiaopeng.iteye.com/blog/408718
采用Javascript 、Css、Html脚本经典的折叠下拉式菜单。在此供大家参考,若有不足之处希望高手指点!
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树,解决了向下勾选子节点、向上勾选父节点,正选反选获取值等问题,勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css