巴斯光年

白天教学生,晚上教自己。致力于推进教育信息化。支持开源
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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 });