Ext 下拉树

首先要引入一个js  combotree.js放在文章最后面

var areaIdTree = new Ext.tree.TreeLoader({dataUrl:basePath+"/btnCaseListManagerAction.do?act=getAreaIdTree"})

var areaIdComboTree = new Ext.form.ComboBoxTree({
fieldLabel:"地域",
id:"areaId",
hiddenName:"areaIdHidden",
width:160,
tree:new Ext.tree.TreePanel({
root: new Ext.tree.AsyncTreeNode({
id:"95",
text:"宁夏回族自治区",
expanded:false,
leaf:false,
loader:areaIdTree
}),
rootVisible:true,
border: false,//不然会出现两个框
       listeners: {
           beforeload:function(n) {if (n) { this.getLoader().baseParams.id = n.attributes.id;}  }
       }
}),
   onSelect: function(cmb, node) {//选择的时候触发
        cmb.canCollapse = false;  //不关闭当前树
   },
})
areaIdComboTree.tree.on("checkchange",function(node,checked){
areaIdComboTree.canCollapse = false;//勾选后不关闭树panel
var text = node.text;//勾选节点中文名称
var id = node.id;
var textArray = new Array();
var idArray = new Array();
var nodes = areaIdComboTree.tree.getRootNode().childNodes;
for (var j = 0;j < nodes.length; j++){
var nodeChild = areaIdComboTree.tree.getRootNode().childNodes[j];
if(nodeChild.hasChildNodes()){
for(var i = 0;i < nodeChild.childNodes.length; i++){
if(nodeChild.childNodes[i].getUI().checkbox.checked){//判断叶子节点是否被勾上
textArray.push(nodeChild.childNodes[i].text);
idArray.push(nodeChild.childNodes[i].id);
}
}
}
}
areaIdComboTree.setValue(textArray.join());
areaIdValue = idArray.join();
},areaIdComboTree.tree)

在Action中 要把数据转为树的格式

public ActionForward getAreaIdTree(ActionMapping mapping,ActionForm form,
HttpServletRequest request,HttpServletResponse response) throws Exception{
List<HashMap> list = dao.getAreaIdTree();
List<HashMap> treeList = getChildren(list);
JSONArray jsonArray = JSONArray.fromObject(treeList);
response.setCharacterEncoding("utf-8");
response.getWriter().print(jsonArray);
return null;
}

private List<HashMap> getChildren(List<HashMap> nodes) {
List<String> list = new ArrayList<String>();
List<HashMap> listTree = new ArrayList<HashMap>();
for (HashMap node : nodes) {
if(!list.contains((String)node.get("pid"))) {
list.add((String)node.get("pid"));
}
}
List trees[] = new ArrayList[list.size()];
for (int i = 0; i < trees.length; i++) {
trees[i] = new ArrayList();
}
for (HashMap node : nodes) {
if(!list.contains((String)node.get("id"))) {
node.put("leaf", "true");
node.put("checked", false);
}
if(node.get("pid").equals("1")){
node.put("expanded", "true");
}
for(int i = 0;i < list.size();i++) {
if(list.get(i).equals((String)node.get("pid"))) {
trees[i].add(node);
}
if(list.get(i).equals((String)node.get("id"))) {
node.put("children", trees[i]);
}
}
if(((String)node.get("pid")).equals("95")) {//根节点的pid是什么equals就写什么
node.put("expanded", "true");
listTree.add(node);
}
}
return listTree;
}

combotree.js

Ext.form.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
        store: new Ext.data.SimpleStore({ fields: [], data: [[]] }),
        editable: false,
        shadow: false,
        mode: 'local',
        triggerAction: 'all',
        selectedClass: '',
        onSelect: null,
        canCollapse: true,
        constructor: function(_cfg) {
            if (_cfg == null) {
                _cfg = {};
            }
            Ext.apply(this, _cfg);
            this.treerenderid = Ext.id();
            this.tpl = String.format('<tpl for="."><div style="height:200px"><div id="ext-combobox-tree{0}"></div></div></tpl>', this.treerenderid);
            Ext.form.ComboBoxTree.superclass.constructor.apply(this, arguments);
            if (this.tree) {
                var cmb = this;
                this.tree.on('click', function(node) {
                    cmb.canCollapse = true;
                    if (Ext.isFunction(cmb.onSelect)) {
                        cmb.onSelect(cmb, node);
                    } else {
                        cmb.setValue(node.text);
                        if (cmb.hiddenField) {
                            cmb.hiddenField.value = node.id;
                        }
                    } 
                  
                   // cmb.collapse();
                });
                


                //以下事件，让combobox能正常关闭
                //this.tree.on('expandnode', function() { cmb.canCollapse = true; });
                this.tree.on('beforeload', function() { cmb.canCollapse = false; });
                this.tree.on('beforeexpandnode', function() { cmb.canCollapse = false; });
                this.tree.on('beforecollapsenode', function() { cmb.canCollapse = false; });
              /*  this.tree.on('checkchange', function() { 
                cmb.canCollapse = false;
                });*/
                
            }
            this.on('expand', this.expandHandler, this);
            this.on('collapse', this.collapseHandler, this);
        },
        expandHandler: function expand() {
            this.canCollapse = true;
            if (this.tree) {
                this.tree.render('ext-combobox-tree' + this.treerenderid);
                this.canCollapse = true;          
                this.tree.getRootNode().expand();
                
            }
        },
        collapseHandler: function collapse() {
            if (!this.canCollapse) {
                this.expand();
            }
            
        }
    
    });
    Ext.reg('combotree', Ext.form.ComboBoxTree);