Extjs 二级联动

1级下拉框

  后台回去参数:

var getRootDataJsonStore = new Ext.data.JsonStore(
{ //填充的数据
url : REQUEST_URL_BASE + "dataOutPollHandler/getRootData",
fields : new Ext.data.Record.create( [
'wbjjc'])
});


new Ext.FormPanel的1级下拉框:


{
xtype : 'combo',
fieldLabel : '<span style="color:red;font-size:13pt;">*</span>委办
width : 110,
allowBlank : false,
editable : false,
mode : 'local',
hiddenName : 'addwbjbm',
id : "addFormWBJNameId",
store : getRootDataJsonStore,
triggerAction : 'all',
displayField : 'wbjjc',// 定义要显示的字段
//valueField : 'wbjbm',// 定义值字段
forceSelection : true,// 要求输入值必须在列表中存在
resizable : true,// 允许改变下拉列表的大小
typeAhead : true,// 允许自动选择匹配的剩余部分文本
blankText : '请选择委办局',
handleHeight : 10

}


最后面需要跟上这么一句话:

Ext.getCmp('addFormWBJNameId').store.load();


二级菜单及store参数


  在js最上面设置全局变量:

var changeUrl=REQUEST_URL_BASE + "dataOutPollHandler/xxlmcList";


new Ext.FormPanel的2级下拉框:

{
xtype : 'combo',
fieldLabel : '<span style="color:red;font-size:13pt;margin-left:-3px;">*</span>信息类名称',
allowBlank : false,
editable : false,
width : 110,
hiddenName : 'dataInfo',
mode : 'local',
id : 'dataInfoId',
store : new Ext.data.JsonStore(
{ //填充的数据
url :
changeUrl,
async: false,//同步
fields : new Ext.data.Record.create( ['
xxlmc' ])
}),
triggerAction : 'all',
displayField : 'xxlmc',
//valueField : 'id',// 定义值字段
forceSelection : true,// 要求输入值必须在列表中存在
resizable : false,// 允许改变下拉列表的大小
typeAhead : true,// 允许自动选择匹配的剩余部分文本
blankText : '请选择信息类名称',
handleHeight : 10

}


设置2级联动(意思是点击1级菜单2级菜单开始加载数据,通过URL传递wbjjc参数到后台):


Ext.getCmp("
addFormWBJNameId").on('select',function(){
Ext.getCmp("dataInfoId").setValue('');
var wbjjc = Ext.getCmp("addFormWBJNameId").getValue();
 var store=Ext.getCmp("
dataInfoId").getStore();
 store.load({
        async: false,
       params: {
wbjjc:wbjjc}
      });
});


后台处理代码:

public String xxlmcList(Model model) throws UnsupportedEncodingException {


String wbjjc=model.getValue("wbjjc");


List<String>xxlmcList=dataOutPollService.xxlmcList(model, wbjjc);


CreateJson json = new CreateJson();


for (int i = 0; i < xxlmcList.size(); i++) {
json.add("
xxlmc", xxlmcList.get(i));
json.addToList();
}


return json.getResultJson();
}

根据大家的习惯可以自己设置后台代码

用于借鉴。


猜你喜欢

转载自blog.csdn.net/chenxiaoscode/article/details/52871843