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