EXT JS 中的Ext.form.ComboBox 是基于输入框封装的widget,很灵活,代价是易用性非常差,特别是针对复杂的多级级联框。
调用者需要针对自己的需求做一下灵活的封装,来降低复杂度,让开发人员更容易调用,同时代让码复用的程度更高。
无论是省市乡镇,还是商品分类,无论是两级,还是多级,还是同级多个Child, API的行为都应当保持一致。
特点:
1.将数据源封装在内部,简化调用代码
2.一个下拉框允许设置同级多个child下拉框
3.允许设置默认值,并触发Select事件
4.下拉框中,允许设置特有的POST request 参数,在发送请求时,自动发送。
![](/images/blogjava_net/OneEyeWolf/31537/r_comboxDemo.bmp)
调用方式:
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function()
{
2
//城市下级有商业区和行政区,两种同级类型,
3
//后端通过 data2.html 及 Post 参数 type 和 parent来 输出不同的数据
4![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var myCmb1 = new MyComboBox(
{
5
dataUrl:'data2.html',
6
applyTo:'select1',
7
defaultValue:'2',
8![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
params:
{type:'city'} //城市
9
10
});
11![](/Images/OutliningIndicators/InBlock.gif)
12![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var myCmb2 = new MyComboBox(
{
13
dataUrl:'data2.html',
14
applyTo:'select2',
15![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
params:
{type:'business'} //商业区
16
17
});
18![](/Images/OutliningIndicators/InBlock.gif)
19![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var myCmb3 = new MyComboBox(
{
20
dataUrl:'data2.html',
21
applyTo:'select3',
22![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
params:
{type:'district'} //行政区
23
24
});
25![](/Images/OutliningIndicators/InBlock.gif)
26
myCmb1.addChild(myCmb2).addChild(myCmb3);
27![](/Images/OutliningIndicators/InBlock.gif)
28
myCmb1.reload();
29![](/Images/OutliningIndicators/InBlock.gif)
30
}); 代码:
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
MyComboBox = Ext.extend(Ext.form.ComboBox,
{
2
valueField: 'id',
3
displayField: 'label',
4
emptyText:'请选择
',//默认值
5
mode:'local',
6
triggerAction:'all',
7![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
initComponent: function()
{
8
//在组件初始化期间调用的代码
9![](/Images/OutliningIndicators/InBlock.gif)
10
this.children = [];
11
12
//调用父类构造函数(必须)
13
MyComboBox.superclass.initComponent.apply(this, arguments);
14![](/Images/OutliningIndicators/InBlock.gif)
15
//**设置数据源**
16![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.store = new Ext.data.Store(
{
17![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
baseParams: this.params ||
{},
18![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy: new Ext.data.HttpProxy(
{
19
url: this.dataUrl
20
}),
21![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
reader: new Ext.data.JsonReader(
{
22
root: 'dms',
23
id: 'id',
24
totalProperty: 'recordCount',
25
}, [
26![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'id', mapping: 'id'},
27![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'label', mapping: 'label'}
28
])
29
});
30
},
31
//设置默认值,并触发Select 事件
32![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
setDefaultValue:function(v)
{
33
this.setValue(v);
34![](/Images/OutliningIndicators/InBlock.gif)
35
this.fireEvent('select', this);
36
},
37![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//** 向数据源添加request参数 */
38![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
addParam:function(parameters)
{
39
Ext.apply(this.store.baseParams, parameters);
40
},
41
42![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
listeners:
{
43![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
select : function(combo, record,index)
{
44![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.each(this.children, function(child)
{
45
//child.clearValue();
46
//级联的子下拉框会多发送一个&parent=..的参数,后端据此可以做出判断如何加载数据
47![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
child.addParam(
{parent:combo.value});
48![](/Images/OutliningIndicators/InBlock.gif)
49
child.reload();
50![](/Images/OutliningIndicators/InBlock.gif)
51
});
52
}
53
},
54![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//** 添加下级级联的下拉框 */
55![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
addChild:function(child)
{
56
this.children.push(child);
57![](/Images/OutliningIndicators/InBlock.gif)
58
return this;
59
},
60![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//** 重新加载数据源 */
61![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
reload:function()
{
62
if(this.store)
63
this.store.load();
64![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.defaultValue)
{
65
this.setDefaultValue(this.defaultValue);
66
this.defaultValue = null; //默认值,只初始化一次
67
}
68![](/Images/OutliningIndicators/InBlock.gif)
69![](/Images/OutliningIndicators/InBlock.gif)
70
return this;
71
}
72![](/Images/OutliningIndicators/InBlock.gif)
73
}); 应用库:
1
link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
2
link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-gray.css" />
3![](/Images/OutliningIndicators/None.gif)
4
script src="../../js/ext-base.js">span style="COLOR: #800000">script>
5
script src="../../js/ext-all-debug.js">span style="COLOR: #800000">script> 20人合租600元/年