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();
}

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

用于借鉴。

Extjs 二级联动相关推荐

关于ExtJS在使用下拉列表框的二级联动获取数据
2019独角兽企业重金招聘Python工程师标准>>> 使用下拉列表框的二级联动获取数据,如果第一个下拉列表框有默认值时,需要设置fireEvent执行select事件示例: va ...
popwindow下拉筛选二级联动_职场人必备！一分钟搞定Excel二级联动下拉菜单
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
select三级联动怎么删除前一个的_python测试开发django57.xadmin选项二级联动
前言当我们选择项目分类的时候,一个项目下关联多个模块,同时有这两个选项框的时候,需要实现选中一个项目,模块里面自动删除出该项目下的模块,如下图这种解决基本思路: 1.写个jqeury脚本监听cha ...
二级联动菜单，简单实现
/*** jQuery Linkage Menu** Copyright 2014, sunyingyuan* QQ: 1586383022* Email: yingyuansun@163.com** ...
Ajax实现的城市二级联动一
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"><o ...
Vue -- 配合iView实现省市二级联动
在实现省市二级联动时,如果省份和城市写在一个数组对象中.可以根据,点击某个省份时获取到目标省份的id 是否同数组中的某个对象id一致来判断 iView中的on-change事件 on-change ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
ADO.NET——二级联动 +ajax
View视图代码: //需要定义一个表里,用onchange事件来给市下拉框传值 //加载事件 $(function () { shengxia(); shi(""); }) // ...

Extjs 二级联动

Extjs 二级联动相关推荐

最新文章

热门文章