Extjs4 动态更改Store里面的内容

来源：互联网发布：中国言论自由知乎编辑：程序博客网时间：2024/05/22 11:50

目标:通过选择页面不同的radio,动态更新combobox里面的下了表单的内容。

最终效果:

1.没有选择前:

2.选择列表2后

具体代码实现:

01Ext.require('Ext.*');
02Ext.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});

Extjs 的代码比较长，关键在事件监听上面:

1{ boxLabel: '列表1', name: 'rb', inputValue: '1',checked: true},
2 { boxLabel: '列表2', name: 'rb', inputValue: '2',listeners:{change:onChangeRadio}

这里的事件监听不能放在默认选中的radio上面，否则这边事件监听的时候，虽然你对store进行了删除元素的操作，当时实际上，第一次点击的时候，这个功能是不能生效的。具体的原因还在查。

1function onChangeRadio(field,value,oldValue){
2    if(value){
3        localCombo.store.removeAt(4);
4    }else{
5        localCombo.store.insert(4,[{'id':5,'cname':'青海省'}]);
6    }
7}

view source
print?
1事件监听这里比较简单，当radio选中的时候，这里的值就是true,进行相应的操作即可。