EXTJS treecombox

今天写了一个后台的菜单管理页面，新增或修改树节点时，需要选择已经存在的节点作为父节点，于是想让一个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.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]
    });
});

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]

评论

1 楼 rubbishvifir 2009-04-27  

好东东，收啦！！！