Ext菜单联动的完美解决方案

情景说明:
省份下拉框和城市下拉框联动:
formpanel编辑的时候使用在
form.getForm().load({
waitMsg : '正在加载数据',
waitTitle : '提示',
url : '/webmaster/admin/userAction.do?method=getUserInfoWithJson',
method : 'POST',
success : function(frm, action) {
// Ext.Msg.alert('提示', '加载成功');
var pname = action.result.data.provinceName;//省份
var cname = action.result.data.cityName;//城市
Ext.getCmp('webmasterprovinceCmp').setRawValue(pname);
Ext.getCmp('webmastercityCmp').setRawValue(cname);
},
failure : function(frm, action) {
Ext.Msg.alert('提示', '原因如下:' + action.result.errors.info);
}
});



省份下拉框代码:
{
xtype : 'combo',
store : new Ext.data.Store({
proxy : new Ext.data.HttpProxy(
{
url : '/webmaster/admin/globalAction.do?method=getProvinceList'
}),
reader : new Ext.data.JsonReader(
{
root : 'rows',
totalProperty : 'total'
}, [{
name : 'id'
}, {
name : 'name'
}])
}),
displayField : 'name',
valueField : 'id',
fieldLabel:'省份',
// hideLabel : true,
width : 100,
editable : false,
mode : 'remote',
triggerAction : 'all',
forceSelection : true,
typeAhead : true,
name : 'provinceID',
id:'webmasterprovinceCmp',
hiddenName : 'provinceID',
emptyText : '--请选择省份--',
// pageSize : 10,
// disabled : true,
listeners : {
'select' : {
fn : function(combo,
record, index) {
Ext.getCmp('webmastercityCmp').change = true;//
Ext.getCmp('webmastercityCmp').reset();//重置城市
},
scope : this
}
}
// allowBlank : false
}


关键代码:
在省份ComboBox的select事件中,设置城市ComboBox的自定义属性change=true和重置城市ComboBox

城市ComboBox代码:
{
xtype : 'combo',
store : new Ext.data.Store({
proxy : new Ext.data.HttpProxy(
{
url : '/webmaster/admin/globalAction.do?method=getCityByProvinceId'
}),
reader : new Ext.data.JsonReader(
{
root : 'rows',
totalProperty : 'total'
}, [{
name : 'id'
}, {
name : 'name'
}])
}),
listeners:{
'beforequery':function(queryEvent){
var provinceId = Ext.getCmp('webmasterprovinceCmp').getValue();
if(provinceId>0&&queryEvent.combo.change){
var province = Ext.getCmp('webmasterprovinceCmp').getRawValue();
queryEvent.combo.store.load({params:{provinceName:province}});
queryEvent.combo.change = false;
}
return true;
}
},
change:true,
displayField : 'name',
valueField : 'id',
fieldLabel:'城市',
width : 100,
editable : false,
mode : 'local',
triggerAction : 'all',
forceSelection : true,
typeAhead : true,
name : 'cityId',
id:'webmastercityCmp',
hiddenName : 'cityId',
valueNotFoundText:'--请选择城市--',
emptyText : '--请选择城市--'
}

关键代码:
1、为城市ComboBox添加了一个自定义属性change,用来表示省份是否是改变了。
2、将城市ComboBox的mode=local
3、在城市ComboBox的beforequery事件响应函数中加载数据,并返回true。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值