经常在用于显示组织机构的时候会使用下拉树列表组合框,在此给出本人的实现方式,直接上代码:
Ext.ux.TreeCombox = Ext.extend(Ext.form.ComboBox, { /** * @cfg treeUrl {String} * 树的请求地址 */ /** * 根节点 * @property root {TreeNode} */ store : new Ext.data.SimpleStore({ fields : [], data : [[]] }), editable : false, mode : 'local', emptyText : "请选择", allowBlank : false, blankText : "必须输入!", triggerAction : 'all', maxHeight : 400, anchor : '95%', displayField : 'text', valueField : 'id', selectedClass : '', onSelect : Ext.emptyFn, initComponent : function() { this.addEvents( "nodeclick", "afterTreeExpand" ) this.divId = Ext.id() this.tpl = "<tpl for='.'><div style='height:380px'><div id='"+this.divId+"'></div></div></tpl>" this.initTree(); this.tree.on('click', function(node) { // alert("click") // this.selectByValue(node.text) this.setValue(node.text); this.fireEvent("nodeclick",this,node); this.collapse(); },this) this.on('expand', function() { this.tree.render(this.divId); this.fireEvent("afterTreeExpand",this,this.tree) if(this.expandTree){ this.tree.expandAll(); } },this); Ext.ux.TreeCombox.superclass.initComponent.call(this); }, initTree : function () { this.tree = new Ext.tree.TreePanel({ height : 380, scope : this, autoScroll : true, split : true, rootVisible : false, root : this.root || { text : '根节点', draggable : false }, loader :this.treeLoader || new Ext.tree.TreeLoader({ url : this.treeUrl }) }); }, getRootNode : function() { return this.tree.root; }, getTree : function() { return this.tree; } }); Ext.reg("comboxtree",Ext.ux.TreeCombox)