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;
       }
    });

你可能感兴趣的:(jsp,ext)