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

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。

查看更多 下一篇