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，运行后如下：