ExtJS树型下拉框应用--地区选择

1、效果如图

 

2、 引入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、使用该控件1

{
		xtype: 'treeField',
		name: 'pigSource',
		fieldLabel: '来源地',
		emptyText:'选择来源地...',
		listWidth:200,
		listHeight:200,
		readOnly:false,
		dataUrl:'selectCouty.do'
	}

使用该控件2

xtype: 'treeField',
		hiddenName: 'pigSourceName',
		id:'pigSourceName_dzid',
		displayField : 'text',
		valueField: 'id',
		fieldLabel:'产地',
		labelSeparator: ':' + '&nbsp;&nbsp;<img src="'+ Ext.NEEDED_IMAGE_URL + '"/>',
		emptyText:'选择产地...',
		listWidth:200,
		listHeight:200,
		readOnly:false,
		dataUrl:'selectCouty.do',
		allowBlank : false,
		blankText    :'请选择产地',
		listeners:{
			select:{
				fn: function(cob){
					var rvtext = cob.getRawValue();
					var rvid = cob.getValue();
					if(rvid.length!=0){
						Ext.getCmp('pigSourceNo_dzid').setValue(rvid);
						Ext.getCmp('pigSourceName_dzid').setValue(rvtext);
					}
				}
			}
		},
		msgTarget :'side'

 

 

 

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

 

@RequestMapping("/selectCouty.do")
	public String selectCouty(Model model) {
		
		List<County> provincelist = null;
		List<County> citylist = null;
		List<County> countylist = null;
		County province = null; // 省级
		County city; // 市级
		County county;//县级
		
		
		provincelist = new ArrayList<County>();
		province = new County("620000", "甘肃省");
		citylist = new  ArrayList<County>();
		city = new County("620100", "兰州市");
		countylist = new ArrayList<County>();
		county = new County("620101", "市辖区");
		county = new County("620102", "城关区");
		county = new County("620103", "七里河区");
		countylist.add(county);
		city.setChildren(countylist);
		citylist.add(city);
		province.setChildren(citylist);
		provincelist.add(province);

          JSONArray json = JSONArray.fromObject(provincelist);
		return JsonUtils.returnJsonModelAndView(model, json);
	}

评论

2 楼 a707047650 2012-11-23  

能不能发个demo给我啊，[e-mail]

1 楼 guange_cn 2012-05-26  

请问纵向的滚动条怎么不出来啊？