目标:通过选择页面不同的radio,动态更新combobox里面的下了表单的内容。
最终效果:
1.没有选择前:
2.选择列表2后
具体代码实现:
01 | Ext.require( 'Ext.*' ); |
02 | Ext.onReady( function (){ |
03 | //1.实体M |
04 | Ext.define( 'State' ,{ |
05 | extend : 'Ext.data.Model' , |
06 | fields : [ |
07 | {type: 'int' ,name: 'id' }, |
08 | {type: 'string' ,name: 'cname' } |
09 | ] |
10 | }); |
11 | //内存中的数据D |
12 | var localData1 = [ |
13 | { 'id' :1, 'cname' : '广东省' }, |
14 | { 'id' :2, 'cname' : '湖北省' }, |
15 | { 'id' :3, 'cname' : '湖南省' }, |
16 | { 'id' :4, 'cname' : '海南省' }, |
17 | { 'id' :5, 'cname' : '青海省' } |
18 | ]; |
19 | |
20 | //2.定义store,这里区分是内存中的还是远程服务器的 |
21 | //2.1 内存中的 |
22 | var localStore = Ext.create( 'Ext.data.Store' ,{ |
23 | model:State, |
24 | data : localData1 |
25 | }); |
26 | |
27 | //定义radioGroup |
28 | var raidos = Ext.create( 'Ext.form.RadioGroup' ,{ |
29 | itemId: 'raidos' , |
30 | id : 'raidos' , |
31 | name : 'raidos' , |
32 | fieldLabel: '选择进行改变' , |
33 | columns: 2, |
34 | vertical: true , |
35 | items: [ |
36 | { boxLabel: '列表1' , name: 'rb' , inputValue: '1' ,checked: true }, |
37 | { boxLabel: '列表2' , name: 'rb' , inputValue: '2' ,listeners:{change:onChangeRadio} } |
38 | ] |
39 | }); |
40 | |
41 | //定义combo |
42 | var localCombo = Ext.create( 'Ext.form.field.ComboBox' ,{ |
43 | itemId: 'local-combo' , |
44 | id : 'local-combo' , |
45 | name : 'local-combo' , |
46 | fieldLabel : '请选择省' , |
47 | displayField: 'cname' , |
48 | valueField: 'id' , |
49 | store:localStore, |
50 | queryMode: 'local' , |
51 | forceSelection: true , |
52 | allowBlank: false , |
53 | editable: true , |
54 | emptyText: '请选择省' , |
55 | blankText : '请选择省' |
56 | }); |
57 | |
58 | //定义显示的容器 |
59 | var dataPanel = Ext.create( 'Ext.panel.Panel' ,{ |
60 | renderTo : document.body, |
61 | width : 400, |
62 | height :300, |
63 | title : 'Combo box 的简单使用,这里分别用基于内存和基于服务器的实现' , |
64 | plain : true , |
65 | margin: '30 10 0 80' , |
66 | bodyStyle: "padding: 45px 15px 15px 15px;" , |
67 | defaults :{ |
68 | autoScroll: true , |
69 | bodyPadding: 10 |
70 | }, |
71 | items:[ |
72 | raidos, |
73 | localCombo |
74 | ] |
75 | }); |
76 | |
77 | //事件监听 |
78 | function onChangeRadio(field,value,oldValue){ |
79 | if (value){ |
80 | localCombo.store.removeAt(4); |
81 | } else { |
82 | localCombo.store.insert(4,[{ 'id' :5, 'cname' : '青海省' }]); |
83 | } |
84 | } |
85 | }); |
1 | { boxLabel: '列表1' , name: 'rb' , inputValue: '1' ,checked: true }, |
2 | { boxLabel: '列表2' , name: 'rb' , inputValue: '2' ,listeners:{change:onChangeRadio} |
1 | function onChangeRadio(field,value,oldValue){ |
2 | if (value){ |
3 | localCombo.store.removeAt(4); |
4 | } else { |
5 | localCombo.store.insert(4,[{ 'id' :5, 'cname' : '青海省' }]); |
6 | } |
7 | } |
1 | 事件监听这里比较简单,当radio选中的时候,这里的值就是 true ,进行相应的操作即可。 |