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,进行相应的操作即可。