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