ext store 数据修改_Extjs4 动态更改Store里面的内容

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

最终效果:

1.没有选择前:

2.选择列表2后

具体代码实现:

Ext.require('Ext.*');

Ext.onReady(function(){

//1.实体M

Ext.define('State',{

extend : 'Ext.data.Model',

fields : [

{type:'int',name:'id'},

{type:'string',name:'cname'}

]

});

//内存中的数据D

var localData1 = [

{'id':1,'cname':'广东省'},

{'id':2,'cname':'湖北省'},

{'id':3,'cname':'湖南省'},

{'id':4,'cname':'海南省'},

{'id':5,'cname':'青海省'}

];

//2.定义store,这里区分是内存中的还是远程服务器的

//2.1 内存中的

var localStore = Ext.create('Ext.data.Store',{

model:State,

data : localData1

});

//定义radioGroup

var raidos = Ext.create('Ext.form.RadioGroup',{

itemId:'raidos',

id :'raidos',

name :'raidos',

fieldLabel: '选择进行改变',

columns: 2,

vertical: true,

items: [

{ boxLabel: '列表1', name: 'rb', inputValue: '1',checked: true},

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

]

});

//定义combo

var localCombo = Ext.create('Ext.form.field.ComboBox',{

itemId:'local-combo',

id :'local-combo',

name :'local-combo',

fieldLabel :'请选择省',

displayField:'cname',

valueField:'id',

store:localStore,

queryMode:'local',

forceSelection: true,

allowBlank:false,

editable: true,

emptyText:'请选择省',

blankText : '请选择省'

});

//定义显示的容器

var dataPanel = Ext.create('Ext.panel.Panel',{

renderTo : document.body,

width : 400,

height :300,

title : 'Combo box 的简单使用，这里分别用基于内存和基于服务器的实现',

plain :true,

margin:'30 10 0 80',

bodyStyle: "padding: 45px 15px 15px 15px;",

defaults :{

autoScroll: true,

bodyPadding: 10

},

items:[

raidos,

localCombo

]

});

//事件监听

function onChangeRadio(field,value,oldValue){

if(value){

localCombo.store.removeAt(4);

}else{

localCombo.store.insert(4,[{'id':5,'cname':'青海省'}]);

}

}

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

{ boxLabel: '列表1', name: 'rb', inputValue: '1',checked: true},

{ boxLabel: '列表2', name: 'rb', inputValue: '2',listeners:{change:onChangeRadio} 这里的事件监听不能放在默认选中的radio上面，否则这边事件监听的时候，虽然你对store进行了删除元素的操作，当时实际上，第一次点击的时候，这个功能是不能生效的。具体的原因还在查。

function onChangeRadio(field,value,oldValue){

if(value){

localCombo.store.removeAt(4);

}else{

localCombo.store.insert(4,[{'id':5,'cname':'青海省'}]);

}

}

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