Javascript Widget之二 基于EXT JS 的可重用的无限级联下拉框

核心提示：EXT JS 中的Ext.form.ComboBox 是基于输入框封装的widget，很灵活，Javascript Widget之二 基于EXT JS 的可重用的无限级联下拉框，代价是易用性非常差，特别是针对复杂的多级级联框，自动发送，调用方式：1Ext.onReady(function(){2//城市下级有商业区和行

EXT JS 中的Ext.form.ComboBox 是基于输入框封装的widget，很灵活，代价是易用性非常差，特别是针对复杂的多级级联框。

调用者需要针对自己的需求做一下灵活的封装，来降低复杂度，让开发人员更容易调用，同时代让码复用的程度更高。

无论是省市乡镇，还是商品分类，无论是两级，还是多级，还是同级多个Child, API的行为都应当保持一致。

特点：

1.将数据源封装在内部，简化调用代码

2.一个下拉框允许设置同级多个child下拉框

3.允许设置默认值，并触发Select事件

4.下拉框中，允许设置特有的POST request 参数，在发送请求时，自动发送。

调用方式：

1Ext.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});