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: ':' + ' <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);
}