目标:通过选择页面不同的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,进行相应的操作即可。