EXT自定义下拉树形控件

       Ext的树形是大家都非常熟悉也是非常喜爱的东西，笔者第一次使用Ext的原因就是因为Ext能够很简单的构建树形，同时Ext也有他的弊端，如果要使用Ext结合美工制作的页面来写系统是一件很麻烦的事情。

      结合Ext的下拉选择控件来自定义一个树形控件这样也是一个非常实用而且很美工的控件，自己琢磨了一下，给代码贴出来和大家共享!

    

Ext.TreeComboField=Ext.extend(Ext.form.TriggerField,{
	 valueField:"id",
	 displayField:"name",
	 haveShow:false,
	 editable:false,
	 onTriggerClick : function(){
	 	if(!this.tree.rendered)
	 	{
	 	this.treeId = Ext.id();
       	panel.id = this.treeId;
       	this.getEl().dom.parentNode.appendChild(panel);
	 	this.tree.render(this.treeId);
	 	this.tree.setWidth(this.width);
	 	this.tree.getEl().alignTo(this.getEl(), "tl-bl");	
	 	}	 
	 	this.tree.show();
	 },
	 initComponent : function(){
        Ext.TreeComboField.superclass.initComponent.call(this);
       
	 },
	 onRender : function(ct, position){
	 	Ext.TreeComboField.superclass.onRender.call(this, ct, position);	 	
 		this.tree.on("click",this.choice,this);
  		if(this.hiddenName){
            this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
                    'before', true);
            this.hiddenField.value =
                this.hiddenValue !== undefined ? this.hiddenValue :this.value !== undefined ? this.value : '';
            this.el.dom.removeAttribute('name');
        }
         if(!this.editable){
            this.editable = true;
            this.setEditable(false);
        }
	 },
	 getValue : function(){       
       return typeof this.value != 'undefined' ? this.value : '';        
    },
	clearValue : function(){
        if(this.hiddenField){
            this.hiddenField.value = '';
        }
        this.setRawValue('');
        this.lastSelectionText = '';
        this.applyEmptyText();
    },
    readPropertyValue:function(obj,p)
    {
    	var v=null;
    	for(var o in obj)
    	{
    		if(o==p)v=obj[o];
    	}
    	return v;
    },
    setValue : function(obj){   
    	if(!obj){
    		this.clearValue();
    		return;
    	}
    	var v=obj;	
        var text = v;
        var value=this.valueField||this.displayField;
       if(typeof v=="object" && this.readPropertyValue(obj,value)){
        	text=obj[this.displayField||this.valueField];
        	v=obj[value];      	
        }
       	var node = this.tree.getNodeById(v);      
        if(node){
                text = node.text;
            }else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = v;
        }
       Ext.TreeComboField.superclass.setValue.call(this, text);
       this.value = v;
    },
     setEditable : function(value){
        if(value == this.editable){
            return;
        }
        this.editable = value;
        if(!value){
            this.el.dom.setAttribute('readOnly', true);
            this.el.on('mousedown', this.onTriggerClick,  this);
            this.el.addClass('x-combo-noedit');
        }else{
            this.el.dom.setAttribute('readOnly', false);
            this.el.un('mousedown', this.onTriggerClick,  this);
            this.el.removeClass('x-combo-noedit');
        }
    },
	choice:function(node,eventObject)
	{
	if(node.id!="root")	this.setValue(node.id);
	else this.clearValue();
	this.tree.hide();
	},		
	onDestroy : function(){
    if(this.tree.rendered){
       this.tree.getEl().remove();
      }
    Ext.TreeComboField.superclass.onDestroy.call(this);
    }
});
Ext.reg('treecombo', Ext.TreeComboField);

 扩展后的自定义控件，使用非常简单，只要将xtype设置成treecombo即可自动生成，选择树中某条记录后会自动从传递一个id，运行后如下：

 

评论

1 楼 BBZ.DD.A 2009-08-11  

麻烦给个工程包了 [e-mail]