Extjs 二级联动

关于extjs的下拉框二级联动 最近新接触的extjs,需要写下拉框,实现城市与所在街道的联动。用了两种方法。一种是应用filterBy方法 ,另一种是应用store的proxy直接查找。数据量大的时候使用第二种方法。 阅读详情

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 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 立即下载

相关推荐

Extjs实现下拉菜单效果

本文实例为大家分享了Extjs实现下拉树效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resources/css/ext-all.css" > [removed][removed] </head> <body

下拉列表的二级联动(ExtJs)

//下面的方法是创建一个下拉列表的二级联动组件,并扔到原先的面板中expansion : function(cfg){ var typeCombStore = new Ext.data.JsonStore({     //一级列表数据 fields : ['value', 'text'], data : [{ 'value' : 1, 'text' : '一类...

nerveboy学习笔记 1865

【JESD79-5之】11 IDD, IDDQ, IPP规格参数和测试条件(IDD, IDDQ, IPP Specification Parameters and Test conditions)

【代码】【JESD79-5之】11 IDD, IDDQ, IPP规格参数和测试条件(IDD, IDDQ, IPP Specification Parameters and Test conditions)

m0_61126667的博客 4856

Extjs实现二级联动

{ columnWidth : .5, layout : 'form', border : false, items : [{ id : 'gyc', name : 'warnnames', xtype : 'combo', fieldLabel : '来源', stor

hanchuang213的博客 1410

Visual Studio 2022调试Godot 4 C#项目全攻略:从环境配置到断点调试

本文详细介绍了如何配置Visual Studio 2022以高效调试Godot 4 C#项目。从环境搭建、外部编辑器设置到两种核心调试模式(附加到进程与启动配置)的实战指南,帮助开发者构建无缝的工业级工作流,解决编码乱码、断点失效等常见问题,大幅提升开发与问题排查效率。

bush的博客 391

保姆级教程:在RK3588平台上为IMX415 Sensor配置HDR2曝光(附完整代码与避坑点)

本文提供RK3588平台上为IMX415 Sensor配置HDR2曝光的详细教程,涵盖基础概念、限制条件、实战配置步骤及常见问题解决方案。通过完整代码示例和关键参数解析,帮助开发者高效实现HDR2曝光模式,提升图像质量并避开常见陷阱。

weixin_28685287的博客 283

ExtJs二级联动

2.二级联动 通过前一个选的数据,约束后面所选的数据 1.通过向后台取数据的方式 1)定义一级,和二级的数据源 //品牌store 一开始就获得数据 var brankStore = Ext.create('Ext.data.Store',{ fields:['brank_id','brank_name'] proxy:{ type:'ajax', ...

weixin_30549657的博客 177

Opencv2.4.9源码分析——HoughCircles

图形可以用一些参数进行表示,标准霍夫变换的原理就是把图像空间转换成参数空间(即霍夫空间),例如霍夫变换的直线检测就是在距离-角度空间内进行检测。圆可以表示成: (x-a)2+(y-b)2=r2                   (1) 其中a和b表示圆心坐标,r表示圆半径,因此霍夫变换的圆检测就是在这三个参数组成的三维空间内进行检测。 原则上,霍夫变换可以检测任何形状。但复杂的形状需要的

赵春江的专栏 3万+

ext_comboBox二级级联下拉框

Ext.onReady(function(){        var store = new Ext.data.Store({        proxy: new Ext.data.HttpProxy({url: 'ConjunctSelectProcess.jsp'}),        reader: new Ext.data.JsonReader({                totalP...

小宝 214

Ubuntu零基础入门到精通【1.2讲】:Ubuntu 与 Linux 的关系 —— 你用的到底是什么?

🏆 本文收录于 《滚雪球学 Ubuntu》 专栏。 本专栏面向有一定计算机基础,但尚未系统学习 Linux / Ubuntu 的读者,采用“滚雪球式学习法”:先装好、再会用、再理解、再优化、再实战,带你从第一次进入 Ubuntu 桌面 / 终端开始,逐步掌握 Ubuntu 的日常使用、命令操作、软件安装、系统配置、开发环境搭建与服务器部署能力。

**My Coding Family** 3105

地图自定义编码CSV转换成ini文件

创 建 schema.ini 文件:有时,当您尝试使用 .csv 文件将自定义地理信息导入 Tableau 时,您可能会看到“无法使用.csv,因为它不包含唯一列”错误消息。这是因为您的 .csv 文件可能包含数值数据,例如数值邮政编码。对于新的地理角色,Tableau 将只接受文本字段。但是,您可以创建一个 schema.ini 文件,以指示 Tableau 应将您要导入的数值字段视为文本字段。...

wenyusuran的专栏 1975

ExtJs combo的二级联动

二级联动主要是监听一级下拉框的取值,然后将该值作为二级下拉框请求数据时参数。下拉框和其对应的数据源都进行单独定义

执子之手 649

1、vectorCast单元测试常用操作

进入软件主页面,点击file,选择set working directory,随便选择一个保存该项目的目录即可。

weixin_59334478的博客 2155

ExtJs 在gridPanel中每一行内combobox的二级联动

ExtJs 在gridPanel中每一行内combobox的二级联动 前置 extjs版本 3.X 前端没有html代码,都是由extjs写就,最后渲染而成 需求 一个gridPanel中的每一行都有两列是combobox,这两个combobox是联动的,且行与行之间不应该相互影响 效果如图,显示的是第一级combobox 初始解决方法 为第一个combobox添加“select”事件,将选...

qq_35234003的博客 849

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

Extjs二级联动combo省城市

Extjs二级联动 Extjs combox根据省查询城市 实现效果如上图所示, store层代码: 1 Ext.define("ExtApp.store.TeacherProvince",{ 2 extend:"Ext.data.Store", 3 fields:['provinceCode','provinceName'], 4 a...

weixin_30457465的博客 124

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

关于ExtJS在使用下拉列表框的二级联动获取数据

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34049032的博客 194

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

ExtJs Combobox 二级联动

ExtJs Combobox 二级联动

ws_hgo的专栏 9871

Extjs二级联动

/** row1 start  */                                 {                                     layout : 'column',                                     border : false,                                     

苏叶的专栏 1508

Extjs3+MySQL后台数据库实现省份城市二级联动

 Extjs+MySQL后台数据库实现省份城市二级联动 基本代码如下: Ext.onReady(function(){ Ext.QuickTips.init(); Ext.BLANK_IMAGE_URL = "../js/Ext/resources/images/default/s.gif"; var storeProvince = new Ext.data.J...

wjf412189090的博客 188

Extjs combox从后台请求数据实现二级联动

写在前面,自研究生找到这份工作,开始自学java web,零零碎碎花了半年的时间,web开发的知识体系基本算是过了一遍,包括ssh框架,但之前都是零碎的实现,前端就只练习前端,后端只练习后端,前后端的是怎么交互的,理论上知道那么回事,可是从来没用过,趁着实习及试用期时间,学习了下Extjs,把extjs的相关知识结合起来,写了这么个demo: 踩到的坑:   后代去数据库查询的结果为...

diaosongshu3398的博客 246

extjs的ComboBox 2级联动

学习了 EXTJS ,项目中也有2级联动的需要,现将代码写下来作为笔记 1 这里 EXTJS 环境 后台都不做介绍了。有兴趣的朋友可以下载源码来研究一下。下面只贴一写EXTJS 方面的代码。项目借用了STRUTS2一些东西,这里也不在做介绍。 2前台代码   function form(){ var manufacturerid_store = new Ext.data.Stor...

个人技术 362
上一篇: EXT用AJAX传值到后台简单处理
下一篇: css渐变线
柠檬不萌c
博客等级 码龄10年 14粉丝 64原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬不萌c

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值