extjs 3.4下拉树扩展

根据[Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree文章最后2个人反馈点击+号展开节点时列表框消失的情况自己体验了下。确实有这个现象，应该是3.x的有这个问题，2.x正常，现在修改代码如下解决这个问题

 

 

ie8，firefox，chrom测试正常,extjs 版本3.4

 

 

 

Ext.ux.ComboBoxTree = function(){
	this.treeId = Ext.id()+'-tree';
	this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight;
	this.tpl = new Ext.Template('<tpl for="."><div style="height:'+this.maxHeight+'px"><div id="'+this.treeId+'"></div></div></tpl>');
	this.store = new Ext.data.SimpleStore({fields:[],data:[[]]});
	this.selectedClass = '';
	this.mode = 'local';
	this.triggerAction = 'all';
	this.onSelect = Ext.emptyFn;
	this.editable = false;
	this.beforeBlur = Ext.emptyFn;

	//all:所有结点都可选中
	//exceptRoot：除根结点，其它结点都可选（默认）
	//folder:只有目录（非叶子和非根结点）可选
	//leaf：只有叶子结点可选
	this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot';
	
	this.addEvents('afterchange');

	Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments);

}

Ext.extend(Ext.ux.ComboBoxTree,Ext.form.ComboBox, {

	expand : function(){
		Ext.ux.ComboBoxTree.superclass.expand.call(this);
		if(this.tree.rendered){
			return;
		}

		Ext.apply(this.tree,{height:this.maxHeight, width:(this.listWidth||this.width-(Ext.isIE?3:0))-2, border:false, autoScroll:true});
		if(this.tree.xtype){
			this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);
		}
		this.tree.render(this.treeId);
		
		var root = this.tree.getRootNode();
		if(!root.isLoaded())
			root.reload();

		this.tree.on('click',function(node){
			var selModel = this.selectNodeModel;
			var isLeaf = node.isLeaf();
			
			if((node == root) && selModel != 'all'){
				return;
			}else if(selModel=='folder' && isLeaf){
				return;
			}else if(selModel=='leaf' && !isLeaf){
				return;
			}
			
			var oldNode = this.getNode();
			if(this.fireEvent('beforeselect', this, node, oldNode) !== false) {
				this.setValue(node);
				this.collapse();

				this.fireEvent('select', this, node, oldNode);
				(oldNode !== node) ? this.fireEvent('afterchange', this, node, oldNode) : '';
			}
		}, this);
    },
    
	setValue : function(node){
		this.node = node;
        var text = node.text;
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = node.id;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = node.id;
    },
    
    getValue : function(){
    	return typeof this.value != 'undefined' ? this.value : '';
    },

	getNode : function(){
		return this.node;
	},

	clearValue : function(){
		Ext.ux.ComboBoxTree.superclass.clearValue.call(this);
        this.node = null;
    },
	// 重写onViewClick，使展开树结点是不关闭下拉框  
    onViewClick : function(doFocus) {  
        var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);  
        if (r) {  
            this.onSelect(r, index);  
        }  
        if (doFocus !== false) {  
            this.el.focus();  
        }  
    },  
	// private
    destroy: function() {
		Ext.ux.ComboBoxTree.superclass.destroy.call(this);
		Ext.destroy([this.node,this.tree]);
		delete this.node;
    }
});

Ext.reg('combotree', Ext.ux.ComboBoxTree);

评论

2 楼 -惜帅- 2012-09-04  

	var comboBoxTree = new Ext.ux.ComboBoxTree({ 
      renderTo : 'EserverTypeID', 
      width : 250, 
      //listWidth:300, 这是设置下拉框的宽度，默认和comBoxTree的宽度相等
      tree : new Ext.tree.TreePanel({ 
            bbar: ['业务类型：',{xtype:'trigger',width:200,triggerClass:'x-form-search-trigger',}], 
            loader: new Ext.tree.TreeLoader({dataUrl:'organization!queryDeptTreeJSON.json'}), 
            root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'}) 
      }),
      selectNodeModel:'leaf', //只有选叶子时，才设置值
      listeners:{
            beforeselect: function(comboxtree,newNode,oldNode){//选择树结点设值之前的事件
                   //...
            },
            select: function(comboxtree,newNode,oldNode){//选择树结点设值之后的事件
                  //...
            },
            afterchange: function(comboxtree,newNode,oldNode){//选择树结点设值之后，并当新值和旧值不相等时的事件
                  //...
            }
      }
	});  

1 楼 -惜帅- 2012-09-04  

哇哦，支持了，找了好久，经测试确实有效哈，谢谢分享！
使用如下：方便后来者

	var comboBoxTree = new Ext.ux.ComboBoxTree({ 
      renderTo : 'EserverTypeID', 
      width : 250, 
      //listWidth:300, 这是设置下拉框的宽度，默认和comBoxTree的宽度相等
      tree : new Ext.tree.TreePanel({ 
            bbar: ['业务类型：',{xtype:'trigger',width:200,triggerClass:'x-form-search-trigger',}], 
            loader: new Ext.tree.TreeLoader({dataUrl:'organization!queryDeptTreeJSON.json'}), 
            root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'}) 
      }),
      selectNodeModel:'leaf', //只有选叶子时，才设置值
      listeners:{
            beforeselect: function(comboxtree,newNode,oldNode){//选择树结点设值之前的事件
                   //...
            },
            select: function(comboxtree,newNode,oldNode){//选择树结点设值之后的事件
                  //...
            },
            afterchange: function(comboxtree,newNode,oldNode){//选择树结点设值之后，并当新值和旧值不相等时的事件
                  //...
            }
      }
	});