extjs扩展之DynamicTreeCombox

今天写了一个后台的菜单管理页面，新增或修改树节点时，需要选择已经存在的节点作为父节点，于是想让一个combox作为载体显示一个树的widget，EXTJS并没有提供该控件，于是逛了逛一些论坛和网站，发现vifir的博客系统使用到了此控件，不过并没有提供源代码参考，没办法，自己写一个吧...

以下代码是扩展于combox的 DynamicTreeCombox，代码如下：

Ext.ns("Ext.ux.form");
Ext.ux.form.DynamicTreeCombox= Ext.extend(Ext.form.ComboBox, {
	initComponent:function(){
		Ext.ux.form.DynamicTreeCombox.superclass.initComponent.call(this);
		this.addEvents('beforeClickNode','afterClickNode');
		if(!this.tree){
			this.tree=new Ext.tree.TreePanel({
				containerScroll:true,
				rootVisible:false,
				root:new Ext.tree.AsyncTreeNode()
			});
			this.tree.loader=new Ext.tree.TreeLoader(this.loaderConfig||{dataUrl:"",baseAttrs:{}});
			this.tree.loader.addListener("beforeload",this.beforeLoad,this);
			this.tree.loader.addListener("load",this.onLoad,this);
			this.tree.addListener('collapsenode',this.onNodeCollapse,this);
			this.tree.addListener('expandnode',this.onNodeExpand,this);
		}
		var fieldMp={
			text:"text",
			qtip:"qtip",
			parentFuncId:"id",
			icon:"icon"
		};
		if(!this.fieldMapping){
			this.fieldMapping=fieldMp;
		}else{
			Ext.applyIf(this.fieldMapping,fieldMp);
		}
	},
	
	initList:function(){
        if(!this.list){
            var cls = 'x-combo-list';
            this.list = new Ext.Layer({
                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
            });
            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setWidth(lw);
            this.list.swallowEvent('mousewheel');
            this.innerList = this.list.createChild({cls:cls+'-inner'});
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
            this.innerList.setHeight("100%");
        }
    },
	
	doQuery:function(){
		if(this.expandAll){
			var loader=this.tree.loader;
			if(loader.baseAttrs){
				Ext.apply(loader.baseAttrs,{expanded:this.expandAll});
			}else{
				loader.baseAttrs={expanded:this.expandAll};
			}			
		}
		if(!this.tree.rendered){
			this.tree.render(this.innerList);
			this.tree.addListener("click",this.clickNode,this);
		}
		this.expand();
    },
    
    beforeLoad:function(loader,node){
    	if(node!=node.getOwnerTree().root){																													
			loader.baseParams.parentFuncId=node.attributes[this.fieldMapping.parentFuncId];																													
		}
    },
    
    onLoad:function(loader,node,res){
    	var nodeArr=node.childNodes;
		for(var i=0,j=nodeArr.length;i<j;i++){
			if(nodeArr[i].attributes[this.fieldMapping.icon]){
				nodeArr[i].getUI().getIconEl().src=nodeArr[i].attributes[this.fieldMapping.icon];
			}
			nodeArr[i].setText(nodeArr[i].attributes[this.fieldMapping.text]);
			nodeArr[i].ui.textNode.setAttribute("qtip", nodeArr[i].attributes[this.fieldMapping.qtip]);
		}	
    },
    
    clickNode:function(node){
    	if(this.fireEvent('beforeClickNode',this,node)){
    		this.setValue(node.attributes[this.displayField]);
    	}
    	this.fireEvent("afterClickNode",this,node); 	
    	this.collapse();
    },
    
    onNodeCollapse:function(node){
    	this.list.setHeight(this.tree.getEl().getHeight()+2);
    },
    
    onNodeExpand:function(node){
    	this.list.setHeight(this.tree.getEl().getHeight()+2);
    },
    
    onDestroy:function(){
        if(this.view){
            this.view.el.removeAllListeners();
            this.view.el.remove();
            this.view.purgeListeners();
        }
        if(this.tree.loader){
        	this.tree.loader.purgeListeners();
        }
        if(this.tree){
        	this.tree.el.removeAllListerers();
        	this.tree.el.remove();
            this.tree.purgeListeners();
        }
        if(this.innerList){
            this.innerList.destroy();
        }
        if(this.list){
            this.list.destroy();
        }
        Ext.form.ComboBox.superclass.onDestroy.call(this);
    }
});

Ext.reg("treecombox",Ext.ux.form.DynamicTreeCombox);

下面是调用的代码，已经加上了注释：

Ext.QuickTips.init();
Ext.onReady(function(){
	var mycbo=new Ext.ux.form.DynamicTreeCombox({
		expandAll:false,//是否在点击combox时将树全部展开
		displayField:"nameLabelCode",//点击树节点时，将节点的哪个字段设置为combox的值
		fieldLabel:"Dynamic Tree Combo",
		readOnly:true,
		width:180,
		loaderConfig:{
			dataUrl:sys.Constants.ROOTPATH+"/sysmgr/SysMenu_list.do",//加载树的URL
			baseParams:{parentFuncId:""}//传递给后台的参数，其中parentFuncId是必须的，而且初始化为第一次加载时parentFuncId为空，即加载的是后台数据库的根节点
		},
		fieldMapping:{//因为我的后台程序返回的没有text qtip字段，故加上fieldMapping进行映射，如果后台返回的json有这几个字段，此属性可省略
			text:"nameLabelCode",//映射node的text字段
			qtip:"descriptionLabelCode",//映射node的qtip字段
			parentFuncId:"funcId"//映射动态请求后台时使用node的funcId字段作为请求参数
		}
	});
	
	var myform=new Ext.form.FormPanel({
		renderTo:Ext.getBody(),
		width:350,
		height:100,
		frame:true,
		labelWidth:150,
		items:[mycbo]
	});
});

贴上效果图：
[img]
http://www.iteye.com/upload/attachment/41240/4848558b-3532-38b7-9650-b32fc214bc73.jpg[/img]

评论

2 楼 dzxiang 2009-05-04  

不错，已收藏！

1 楼 seven_cuit 2008-12-05  

相当感谢，项目中正好用到