ExtJS中ComboBox联动菜单－例码（本地数据）

部分资料来自：《JavaScript凌厉开发－Ext详解实践》

 

 1  // /<reference path="vswd-ext_2.0.2.js">
 2  Ext.onReady( function () {
 3       var  cities  =  [[ ' 北京 ' ,
 4          [
 5              [ ' 北京 ' ],
 6              [ ' 通县 ' ],
 7              [ ' 昌平 ' ],
 8              [ ' 大兴 ' ],
 9              [ ' 密云 ' ],
10              [ ' 顺义 ' ],
11              [ ' 平台 ' ]
12          ]],
13          [ ' 广东 ' ,
14              [
15                  [ ' 潮州 ' ],
16                  [ ' 汕头 ' ]
17              ]
18          ]
19      ];
20 
21       var  localProvince  =   new  Ext.data.SimpleStore({
22          fields: [ ' provinces ' ,  ' cities ' ],
23          data: cities
24      });
25 
26       var  localcities  =   new  Ext.data.SimpleStore({
27          fields: [ ' cities ' ],
28          data: []
29      });
30 
31       var  frm  =   new  Ext.form.FormPanel({
32          title:  ' combo ' ,
33          width:  300 ,
34          autoHeight:  true ,
35          applyTo:  ' con ' ,
36          frame:  true ,
37          labelWidth:  50 ,
38          labelAlign:  ' right ' ,
39          items: [
40              {
41                  xtype:  ' combo ' ,
42                  triggerAction:  ' all ' ,
43                  anchor:  ' 80% ' ,
44                  fieldLabel:  ' Provinces ' ,
45                  editable:  false ,
46                  mode:  ' local ' ,
47                  store: localProvince,
48                  displayField:  ' provinces ' ,
49                  name:  ' provinces ' ,
50                  listeners: {
51                      select:  function (form, rec, index) {
52                          frm.getForm().findField( ' cities ' ).clearValue();
53                          localcities.loadData(rec.get( ' cities ' ));
54                      }
55                  }
56              }, {
57                  xtype:  ' combo ' ,
58                  triggerAction:  ' all ' ,
59                  anchor:  ' 80% ' ,
60                  fieldLabel:  ' cities ' ,
61                  editable:  false ,
62                  name:  ' cities ' ,
63                  mode:  ' local ' ,
64                  displayField:  ' cities ' ,
65                  store: localcities
66              }
67          ]
68      });
69  });