用Ext做菜单式的Combox

梦秋雨

浏览: 82040 次
性别:

最近访客更多访客>>

wq611403

铁皮烈酒

China2010pan

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT HTML

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>