有时我们会用到下拉树，但有好多下拉树都有问题，比如当节点字符长时会出现双滚动条，我以前找了一个下拉树，自己又改了改，用着还不错，和大家共享一下1、引入ComboBoxTree.js，内容如下：function removeValue(value, container) {    if (value.length == 0)        return '';               //去除前后逗号       value = value.replace(/^;/, '').replace(/;$/, '');    container = container.replace(/^;/, '').replace(/;$/, '');               if (container == value)    {        return '';    }               var sArray = container.split(';');    for (var i = sArray.length - 1; i >= 0; --i)    {        if (sArray[i] == value)            sArray[i] = undefined;    }               var result = sArray.join(';');    //因为undefined会连接成,,所以要将,,换成,               result = result.replace(/;;/,';');    result = result.replace(/^;/, '').replace(/;$/, '');               return result;}Ext.ux.ComboBoxTree = function(){this.treeId = Ext.id()+'-tree';this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight;this.tpl = new Ext.Template('
     
      
       
      
     ');this.store = new Ext.data.SimpleStore({fields:[],data:[[]]});this.selectedClass = '';this.mode = 'local';this.triggerAction = 'all';this.onSelect = Ext.emptyFn;this.editable = false;//all:所有结点都可选中//exceptRoot：除根结点，其它结点都可选（默认）//folder:只有目录（非叶子和非根结点）可选//leaf：只有叶子结点可选this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot';/** single单选 （默认）* multiple 多选的*/this.selectModel = arguments[0].selectModel || 'single';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, border:false, autoScroll:false});   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',this.setSingleValue,this);   this.tree.on('checkchange',this.setMultiValue, this);    },  setSingleValue : function(node){   this.collapse();   var selModel = this.selectNodeModel;   var isLeaf = node.isLeaf();     if((node == this.root) && selModel != 'all'){    return;   }else if(selModel=='folder' && isLeaf){    return;   }else if(selModel=='leaf' && !isLeaf){    return;   }     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;           },setMultiValue : function(node,check){          this.node = node;        var text = node.text;        this.lastSelectionText = text;        var display=text;        var val=node.id;               if(!node.isLeaf()){    return;   }   if(!check){    display=removeValue(node.text,this.getRawValue());    val=removeValue(node.id,this.getValue());      }else{    if(this.getValue()==''){     display=text;           val=node.id;    }else if(this.getRawValue().indexOf(node.text)>-1){     return;    }else{     //this.setValue(this.getValue()+';'+node.text);// 设置option值     display=this.getRawValue()+";"+text;           val=this.getValue()+";"+node.id;    }   }   // 选中树节点后的触发事件   //this.fireEvent('treeselected', node);                 Ext.form.ComboBox.superclass.setValue.call(this, display);        if(this.hiddenField){            this.hiddenField.value = val;        }        this.value = val;    },    setComboValue : function(id,text){             //this.lastSelectionText = text;        if(this.hiddenField){            this.hiddenField.value = id;        }        Ext.form.ComboBox.superclass.setValue.call(this, text);        this.value = 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;    },// 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、在自己的js中创建目录树//定义一个树形var contenttree = new Ext.tree.TreePanel({   rootVisible:false,   autoScroll:false,   autoHeight:true,        loader: new Ext.tree.TreeLoader({dataUrl:departmentUrl}),            root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'})   });3、创建下拉树ComboBoxTree对象var departmentList = new Ext.ux.ComboBoxTree({   hiddenName:'department',      width:200,   fieldLabel:'营业部',   autoScroll:false,   autoLoad:true,      //listWidth:300, 这是设置下拉框的宽度，默认和comBoxTree的宽度相等        tree : contenttree,         selectNodeModel:'leaf' //只有选叶子时，才设置值});4、把departmentList 像普通组件一样加入表单就行了其中设置值，分隔符等和普通下拉框一样，可自行研究让我们看一下效果吧 如果想复选的话目录树换成可复选就行了，效果发下：

修改Ext版本升级为3.X后点击关闭下拉框造成不能多选的bug

覆盖ComboBox的onViewClick方法，如下：

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

}

}