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

Posted on 2009-05-07 16:14 巴斯光年阅读(2202) 评论(1) 编辑收藏举报

部分资料来自：《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 });