ext下拉树

关键字: extjs学习
1、效果如图






2、 引入TreeField控件(转载)



Js代码
1.Ext.form.TreeField = Ext.extend(Ext.form.TriggerField,  {     
2.    /**   
3.     * @cfg {Boolean} readOnly   
4.     * 设置为只读状态   
5.     *    
6.     */    
7.    readOnly : true ,     
8.    /**   
9.     * @cfg {String} displayField   
10.     * 用于显示数据的字段名   
11.     *    
12.     */    
13.    displayField : 'text',     
14.    /**   
15.     * @cfg {String} valueField   
16.     * 用于保存真实数据的字段名   
17.     */    
18.    valueField : null,     
19.    /**   
20.     * @cfg {String} hiddenName   
21.     * 保存真实数据的隐藏域名   
22.     */    
23.    hiddenName : null,     
24.    /**   
25.     * @cfg {Integer} listWidth   
26.     * 下拉框的宽度   
27.     */    
28.    listWidth : null,     
29.    /**   
30.     * @cfg {Integer} minListWidth   
31.     * 下拉框最小宽度   
32.     */    
33.    minListWidth : 50,     
34.    /**   
35.     * @cfg {Integer} listHeight   
36.     * 下拉框高度   
37.     */    
38.    listHeight : null,     
39.    /**   
40.     * @cfg {Integer} minListHeight   
41.     * 下拉框最小高度   
42.     */    
43.    minListHeight : 50,     
44.    /**   
45.     * @cfg {String} dataUrl   
46.     * 数据地址   
47.     */    
48.    dataUrl : null,  
49.    /**   
50.     * @cfg {Ext.tree.TreePanel} tree   
51.     * 下拉框中的树   
52.     */    
53.    tree : null,     
54.    /**   
55.     * @cfg {String} value   
56.     * 默认值   
57.     */    
58.    value : null,     
59.    /**   
60.     * @cfg {String} displayValue   
61.     * 用于显示的默认值   
62.     */    
63.    displayValue : null,     
64.    /**   
65.     * @cfg {Object} baseParams   
66.     * 向后台传递的参数集合   
67.     */    
68.    baseParams : {},     
69.    /**   
70.     * @cfg {Object} treeRootConfig   
71.     * 树根节点的配置参数   
72.     */    
73.    treeRootConfig : {     
74.        id : ' ',     
75.        text : '全国',     
76.        draggable:false    
77.        },     
78.    /**   
79.     * @cfg {String/Object} autoCreate   
80.     * A DomHelper element spec, or true for a default element spec (defaults to   
81.     * {tag: "input", type: "text", size: "24", autocomplete: "off"})   
82.     */    
83.    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},     
84.    
85.    initComponent : function(){     
86.        Ext.form.TreeField.superclass.initComponent.call(this);     
87.        this.addEvents(     
88.                'select',     
89.                'expand',     
90.                'collapse',     
91.                'beforeselect'          
92.        );     
93.             
94.    },     
95.    initList : function(){     
96.        if(!this.list){     
97.            var cls = 'x-treefield-list';     
98.    
99.            this.list = new Ext.Layer({     
100.                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false    
101.            });     
102.    
103.            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);     
104.            this.list.setWidth(lw);     
105.            this.list.swallowEvent('mousewheel');     
106.                 
107.            this.innerList = this.list.createChild({cls:cls+'-inner'});     
108.            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));     
109.            this.innerList.setHeight(this.listHeight || this.minListHeight);     
110.            if(!this.tree){     
111.                this.tree = this.createTree(this.innerList);         
112.            }     
113.            this.tree.on('click',this.select,this);     
114.            this.tree.render();     
115.        }     
116.    },     
117.    onRender : function(ct, position){     
118.        Ext.form.TreeField.superclass.onRender.call(this, ct, position);     
119.        if(this.hiddenName){     
120.            this.hiddenField = this.el.insertSibling({tag:'input',      
121.                                                     type:'hidden',      
122.                                                     name: this.hiddenName,      
123.                                                     id: (this.hiddenId||this.hiddenName)},     
124.                    'before', true);     
125.            this.hiddenField.value =     
126.                this.hiddenValue !== undefined ? this.hiddenValue :     
127.                this.value !== undefined ? this.value : '';     
128.            this.el.dom.removeAttribute('name');     
129.        }     
130.        if(Ext.isGecko){     
131.            this.el.dom.setAttribute('autocomplete', 'off');     
132.        }     
133.    
134. 
135.        this.initList();     
136.    },     
137.    select : function(node){     
138.        if(this.fireEvent('beforeselect', node, this)!= false){     
139.            this.onSelect(node);     
140.            this.fireEvent('select', this, node);     
141.        }     
142.    },     
143.    onSelect:function(node){     
144.        this.setValue(node);     
145.        this.collapse();     
146.    },     
147.    createTree:function(el){     
148.        var Tree = Ext.tree;     
149.         
150.        var tree = new Tree.TreePanel({     
151.            el:el,     
152.            autoScroll:true,     
153.            animate:true,     
154.            containerScroll: true,   
155.            rootVisible: false,  
156.            loader: new Tree.TreeLoader({     
157.                dataUrl : this.dataUrl,     
158.                baseParams : this.baseParams     
159.            })     
160.        });     
161.         
162.        var root = new Tree.AsyncTreeNode(this.treeRootConfig);     
163.        tree.setRootNode(root);     
164.        return tree;     
165.    },     
166.    
167.    getValue : function(){     
168.        if(this.valueField){     
169.            return typeof this.value != 'undefined' ? this.value : '';     
170.        }else{     
171.            return Ext.form.TreeField.superclass.getValue.call(this);     
172.        }     
173.    },     
174.    setValue : function(node){     
175.        //if(!node)return;     
176.        var text,value;     
177.        if(node && typeof node == 'object'){     
178.            text = node[this.displayField];     
179.            value = node[this.valueField || this.displayField];     
180.        }else{     
181.            text = node;     
182.            value = node;     
183.                     
184.        }     
185.        if(this.hiddenField){     
186.            this.hiddenField.value = value;     
187.        }     
188.        Ext.form.TreeField.superclass.setValue.call(this, text);     
189.        this.value = value;     
190.    },     
191.    onResize: function(w, h){     
192.        Ext.form.TreeField.superclass.onResize.apply(this, arguments);     
193.        if(this.list && this.listWidth == null){     
194.            var lw = Math.max(w, this.minListWidth);     
195.            this.list.setWidth(lw);     
196.            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));     
197.        }     
198.    },     
199.    validateBlur : function(){     
200.        return !this.list || !this.list.isVisible();        
201.    },     
202.    onDestroy : function(){     
203.        if(this.list){     
204.            this.list.destroy();     
205.        }     
206.        if(this.wrap){     
207.            this.wrap.remove();     
208.        }     
209.        Ext.form.TreeField.superclass.onDestroy.call(this);     
210.    },     
211.    collapseIf : function(e){     
212.        if(!e.within(this.wrap) && !e.within(this.list)){     
213.            this.collapse();     
214.        }     
215.    },     
216.    
217.    collapse : function(){     
218.        if(!this.isExpanded()){     
219.            return;     
220.        }     
221.        this.list.hide();     
222.        Ext.getDoc().un('mousewheel', this.collapseIf, this);     
223.        Ext.getDoc().un('mousedown', this.collapseIf, this);     
224.        this.fireEvent('collapse', this);     
225.    },     
226.    expand : function(){     
227.        if(this.isExpanded() || !this.hasFocus){     
228.            return;     
229.        }     
230.        this.onExpand();     
231.        this.list.alignTo(this.wrap, this.listAlign);     
232.        this.list.show();     
233.        Ext.getDoc().on('mousewheel', this.collapseIf, this);     
234.        Ext.getDoc().on('mousedown', this.collapseIf, this);     
235.        this.fireEvent('expand', this);     
236.    },     
237.    onExpand : function(){     
238.        var doc = Ext.getDoc();     
239.        this.on('click',function(){alert(111)},this);     
240.    },     
241.    isExpanded : function(){     
242.        return this.list && this.list.isVisible();     
243.    },     
244.    onTriggerClick : function(){     
245.        if(this.disabled){     
246.            return;     
247.        }     
248.        if(this.isExpanded()){     
249.            this.collapse();     
250.        }else {     
251.            this.onFocus({});     
252.            this.expand();     
253.        }     
254.        this.el.focus();     
255.    }     
256.});     
257.Ext.reg('treeField', Ext.form.TreeField); 
Ext.form.TreeField = Ext.extend(Ext.form.TriggerField,  {  
    /** 
     * @cfg {Boolean} readOnly 
     * 设置为只读状态 
     *  
     */ 
    readOnly : true ,  
    /** 
     * @cfg {String} displayField 
     * 用于显示数据的字段名 
     *  
     */ 
    displayField : 'text',  
    /** 
     * @cfg {String} valueField 
     * 用于保存真实数据的字段名 
     */ 
    valueField : null,  
    /** 
     * @cfg {String} hiddenName 
     * 保存真实数据的隐藏域名 
     */ 
    hiddenName : null,  
    /** 
     * @cfg {Integer} listWidth 
     * 下拉框的宽度 
     */ 
    listWidth : null,  
    /** 
     * @cfg {Integer} minListWidth 
     * 下拉框最小宽度 
     */ 
    minListWidth : 50,  
    /** 
     * @cfg {Integer} listHeight 
     * 下拉框高度 
     */ 
    listHeight : null,  
    /** 
     * @cfg {Integer} minListHeight 
     * 下拉框最小高度 
     */ 
    minListHeight : 50,  
    /** 
     * @cfg {String} dataUrl 
     * 数据地址 
     */ 
    dataUrl : null,
    /** 
     * @cfg {Ext.tree.TreePanel} tree 
     * 下拉框中的树 
     */ 
    tree : null,  
    /** 
     * @cfg {String} value 
     * 默认值 
     */ 
    value : null,  
    /** 
     * @cfg {String} displayValue 
     * 用于显示的默认值 
     */ 
    displayValue : null,  
    /** 
     * @cfg {Object} baseParams 
     * 向后台传递的参数集合 
     */ 
    baseParams : {},  
    /** 
     * @cfg {Object} treeRootConfig 
     * 树根节点的配置参数 
     */ 
    treeRootConfig : {  
        id : ' ',  
        text : '全国',  
        draggable:false 
        },  
    /** 
     * @cfg {String/Object} autoCreate 
     * A DomHelper element spec, or true for a default element spec (defaults to 
     * {tag: "input", type: "text", size: "24", autocomplete: "off"}) 
     */ 
    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},  
 
    initComponent : function(){  
        Ext.form.TreeField.superclass.initComponent.call(this);  
        this.addEvents(  
                'select',  
                'expand',  
                'collapse',  
                'beforeselect'       
        );  
          
    },  
    initList : function(){  
        if(!this.list){  
            var cls = 'x-treefield-list';  
 
            this.list = new Ext.Layer({  
                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false 
            });  
 
            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);  
            this.list.setWidth(lw);  
            this.list.swallowEvent('mousewheel');  
              
            this.innerList = this.list.createChild({cls:cls+'-inner'});  
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));  
            this.innerList.setHeight(this.listHeight || this.minListHeight);  
            if(!this.tree){  
                this.tree = this.createTree(this.innerList);      
            }  
            this.tree.on('click',this.select,this);  
            this.tree.render();  
        }  
    },  
    onRender : function(ct, position){  
        Ext.form.TreeField.superclass.onRender.call(this, ct, position);  
        if(this.hiddenName){  
            this.hiddenField = this.el.insertSibling({tag:'input',   
                                                     type:'hidden',   
                                                     name: this.hiddenName,   
                                                     id: (this.hiddenId||this.hiddenName)},  
                    'before', true);  
            this.hiddenField.value =  
                this.hiddenValue !== undefined ? this.hiddenValue :  
                this.value !== undefined ? this.value : '';  
            this.el.dom.removeAttribute('name');  
        }  
        if(Ext.isGecko){  
            this.el.dom.setAttribute('autocomplete', 'off');  
        }  
 

        this.initList();  
    },  
    select : function(node){  
        if(this.fireEvent('beforeselect', node, this)!= false){  
            this.onSelect(node);  
            this.fireEvent('select', this, node);  
        }  
    },  
    onSelect:function(node){  
        this.setValue(node);  
        this.collapse();  
    },  
    createTree:function(el){  
        var Tree = Ext.tree;  
      
        var tree = new Tree.TreePanel({  
            el:el,  
            autoScroll:true,  
            animate:true,  
            containerScroll: true,
            rootVisible: false,
            loader: new Tree.TreeLoader({  
                dataUrl : this.dataUrl,  
                baseParams : this.baseParams  
            })  
        });  
      
        var root = new Tree.AsyncTreeNode(this.treeRootConfig);  
        tree.setRootNode(root);  
        return tree;  
    },  
 
    getValue : function(){  
        if(this.valueField){  
            return typeof this.value != 'undefined' ? this.value : '';  
        }else{  
            return Ext.form.TreeField.superclass.getValue.call(this);  
        }  
    },  
    setValue : function(node){  
        //if(!node)return;  
        var text,value;  
        if(node && typeof node == 'object'){  
            text = node[this.displayField];  
            value = node[this.valueField || this.displayField];  
        }else{  
            text = node;  
            value = node;  
                  
        }  
        if(this.hiddenField){  
            this.hiddenField.value = value;  
        }  
        Ext.form.TreeField.superclass.setValue.call(this, text);  
        this.value = value;  
    },  
    onResize: function(w, h){  
        Ext.form.TreeField.superclass.onResize.apply(this, arguments);  
        if(this.list && this.listWidth == null){  
            var lw = Math.max(w, this.minListWidth);  
            this.list.setWidth(lw);  
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));  
        }  
    },  
    validateBlur : function(){  
        return !this.list || !this.list.isVisible();     
    },  
    onDestroy : function(){  
        if(this.list){  
            this.list.destroy();  
        }  
        if(this.wrap){  
            this.wrap.remove();  
        }  
        Ext.form.TreeField.superclass.onDestroy.call(this);  
    },  
    collapseIf : function(e){  
        if(!e.within(this.wrap) && !e.within(this.list)){  
            this.collapse();  
        }  
    },  
 
    collapse : function(){  
        if(!this.isExpanded()){  
            return;  
        }  
        this.list.hide();  
        Ext.getDoc().un('mousewheel', this.collapseIf, this);  
        Ext.getDoc().un('mousedown', this.collapseIf, this);  
        this.fireEvent('collapse', this);  
    },  
    expand : function(){  
        if(this.isExpanded() || !this.hasFocus){  
            return;  
        }  
        this.onExpand();  
        this.list.alignTo(this.wrap, this.listAlign);  
        this.list.show();  
        Ext.getDoc().on('mousewheel', this.collapseIf, this);  
        Ext.getDoc().on('mousedown', this.collapseIf, this);  
        this.fireEvent('expand', this);  
    },  
    onExpand : function(){  
        var doc = Ext.getDoc();  
        this.on('click',function(){alert(111)},this);  
    },  
    isExpanded : function(){  
        return this.list && this.list.isVisible();  
    },  
    onTriggerClick : function(){  
        if(this.disabled){  
            return;  
        }  
        if(this.isExpanded()){  
            this.collapse();  
        }else {  
            this.onFocus({});  
            this.expand();  
        }  
        this.el.focus();  
    }  
});  
Ext.reg('treeField', Ext.form.TreeField);

3、使用该控件

Js代码
1.{  
2.        xtype: 'treeField',  
3.        name: 'pigSource',  
4.        fieldLabel: '来源地',  
5.        emptyText:'选择来源地...',  
6.        listWidth:200,  
7.        listHeight:200,  
8.        readOnly:false,  
9.        dataUrl:'selectCouty.do' 
10.    } 
{
xtype: 'treeField',
name: 'pigSource',
fieldLabel: '来源地',
emptyText:'选择来源地...',
listWidth:200,
listHeight:200,
readOnly:false,
dataUrl:'selectCouty.do'
}

4、数据来源通过selectCounty.do获取（如下例子）



Java代码
1.@RequestMapping("/selectCouty.do")  
2.    public String selectCouty(Model model) {  
3.          
4.        List<County> provincelist = null;  
5.        List<County> citylist = null;  
6.        List<County> countylist = null;  
7.        County province = null; // 省级  
8.        County city; // 市级  
9.        County county;//县级  
10.          
11.          
12.        provincelist = new ArrayList<County>();  
13.        province = new County("620000", "甘肃省");  
14.        citylist = new  ArrayList<County>();  
15.        city = new County("620100", "兰州市");  
16.        countylist = new ArrayList<County>();  
17.        county = new County("620101", "市辖区");  
18.        county = new County("620102", "城关区");  
19.        county = new County("620103", "七里河区");  
20.        countylist.add(county);  
21.        city.setChildren(countylist);  
22.        citylist.add(city);  
23.        province.setChildren(citylist);  
24.        provincelist.add(province);  
25. 
26.          JSONArray json = JSONArray.fromObject(provincelist);  
27.        return JsonUtils.returnJsonModelAndView(model, json);  
28.    }