浏览 2565 次
|
锁定老帖子 主题：用Ext做菜单式的Combox
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-10-27
Ext提供了Combox，也提供了Menu做多级菜单。下面的代码把二者组合起来，形成一个带多级菜单的Combox。效果图如附件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script>
var metawork={};
metawork.searchFieldsCache = new Object();
var dataFields = [
{
id:"title",
name:"标题",
type:"string"
},{
id:"id",
name:"标识",
type:"int"
},{
id:"organization",
name:"所属机构",
type:"",
children:[ //代表子属性
{
id:"id",
name:"标识",
type:"int"
},{
id:"id",
name:"名称",
type:"string"
}
]
}
];
var fieldsEditor = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
displayField:'name',
mode: 'local',
editable:false,
triggerAction: 'all',
tpl: '<div id="fieldsMenu"></div>'
});
var fieldMenu = new Ext.menu.Menu({
id: 'fieldsRootMenu',
minWidth:150
});
Ext.menu.DynamicItem = function(config){
Ext.menu.DynamicItem.superclass.constructor.call(this, config);
this.on("click",function(m,e){
fieldsEditor.setValue(m.fullText||m.text);
});
};
Ext.extend(Ext.menu.DynamicItem, Ext.menu.Item, {
// private
expandMenu : function(autoActivate){
if(!this.disabled && this.menu){
clearTimeout(this.hideTimer);
delete this.hideTimer;
if(!this.menu.isVisible() && !this.showTimer){
//如果有chldren属性并且还没有装载，那么装载之
if(this.children && this.children.length>0 && this.menu.items.length == 0){
for(var index=0;index<this.children.length;index++){
var item = this.children[index];
this.menu.add(new Ext.menu.DynamicItem({
text:item.name,
menu:item.children?{items:[]}:null,
children:item.children,
fullText:this.text + "_" + item.name,
url:item.url
}));
}
}
this.showTimer = this.deferExpand.defer(this.showDelay, this, [autoActivate]);
}else if (this.menu.isVisible() && autoActivate){
this.menu.tryActivate(0, 1);
}
}
}
});
for(var i = 0;i<dataFields.length;i++){
var item = dataFields[i];
fieldMenu.add(new Ext.menu.DynamicItem({
text:item.name,
menu:item.children?{items:[]}:null,
children:item.children
}));
}
fieldsEditor.on('expand',function(){
fieldMenu.show(Ext.get("fieldsMenu"));
});
</script>
</HEAD>
<BODY onload="fieldsEditor.render('fieldEditor')">
<div id="fieldEditor"></div>
</BODY>
</HTML>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
