ext combobox下拉树的实现
项目需要，对ext的bombobox实现了子类，来展示下拉列表树。哪有不好的，网友多多指正
/* * ext-3.2.1版本点击树的节点时，树自动隐藏，可能是这个版本的一个bug,下面是覆盖一个方法，解决此bug */Ext.override(Ext.form.ComboBox, { onViewClick : function(doFocus) { var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index); if (r) { this.onSelect(r, index); } else if (s.getCount() === 0) { this.collapse(); } if (doFocus !== false) { this.el.focus(); } } }); Ext.namespace("Tm");/** * 下拉列表树,不带复选框，可控制只选叶子节点和所有节点,支持异步和本地加载 * 扩展属性： * @tree 树对象 * @treeurl 树请求地址，如果是null，则本地加载 * @treeRootVisible 树根节点是否可见，true为可见，false是不可见，默认是不可见 * @treeValue 根节点的默认子节点，本地加载 * 目前问题：初始化对象必须传递renderTo属性 * @treeHeight 树面板的默认高度 * @onlyLeafCheckable 是否只允许选择叶子节点，true是只允许选择叶子节点，false所有节点均可选择 * @treeRootText 根节点的text * @class Tm.TreeComboBox * @extends Ext.form.ComboBox * * 案例页面extendcombox.jsp */Tm.TreeComboBox = Ext.extend(Ext.form.ComboBox, { store:new Ext.data.SimpleStore({fields:[],data:[[]]}), tree:null,//树对象 treeurl:null,//树url treeRootVisible:null,//根节点是否可见，默认为false,不可见 treeValue:null,//根的默认节点 treeHeight:120,//默认树的面板高度 treeRootText:'根节点', onlyLeafCheckable:false,//默认所有节点均可选择，如果是true,只允许选择叶子节点 constructor: function(config) { this.tpl= '<tpl for="."><div style="height:'+(this.treeHeight)+'px"><div id="'+this.renderTo+'_tree"></div></div></tpl>'; Tm.TreeComboBox.superclass.constructor.apply(this, arguments); this._init(); }, /* *初始化 */ _init:function(){ this.getTree(); this.on("expand",function(){this.tree.render(this.renderTo+'_tree');});//树点击添加监听this.tree.addListener("click",function(node,e){ e.stopEvent(); if(this.onlyLeafCheckable){ if(!node.leaf){ node.expand(); return; } } if(node.disabled)return; this.setValue(node.id); this.setRawValue(node.text); this.collapse();},this); }, /* *获取树对象 */ getTree: function(){ if(!this.tree){ var root =new Ext.tree.AsyncTreeNode({id:'root',text:this.treeRootText,children:this.treeValue});var load1=new Ext.tree.TreeLoader();var load2=new Ext.tree.TreeLoader({ dataUrl:this.treeurl }) this.tree=new Ext.tree.TreePanel({ root:root,//定位到根节点 animate:true,//开启动画效果 enableDD:false,//不允许子节点拖动 border:false,//没有边框 rootVisible:this.treeRootVisible||false,//设为false将隐藏根节点 loader:this.treeurl==null?load1:load2 }); } return this.tree; } });