项目需求:有两个下拉列表A和B。当你点击A列表里的一个值时,再点击B列表里面对应的值。也就是说,B列表的值是由A列表里的某个值决定的。B列表的值随A列表的值的不同而不同。由于使用了Ext作为表现层,所以不可避免的使用到了ComboBox。
解决思路:点击A列表,从后台加载一条JSON格式的数据,然后在A列表里显示。当点击A列表里的某个值时,触发一个C事件。C事件将重新设置B列表,同时B列表从后台请求一条JSON格式的数据,同时B列表又加载新的数据源。
好了,有了解决思路那就开始写代码吧。
1、首先,我们定义一个groupDS和一个groupCombo。
var groupDS = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'getGroupsByUser.action'
}),
reader : new Ext.data.JsonReader({
root : 'rows',
totalProperty : 'total',
id : 'groupId',
fields : ['groupId', 'groupName']
})
});
groupDS.load();
var groupCombo = new Ext.form.ComboBox({
// store: store,
store : groupDS,
fieldLabel : '分组',
displayField : 'groupName',
mode : 'local',
emptyText : '请选择一个分组',
valueField : 'groupId',
hiddenName : 'groupId',
anchor : '100%'
});
2、定义一个typeReader,一个typeDS和typeCombo。
var typeReader = new Ext.data.JsonReader({
id : 'typeId',
root : 'rows',
totalProperty : 'total',
fields : ['typeId', 'typeName', 'isIncome']
});
var typeDS = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'getTypesByUser.action'
}),
reader : typeReader
});
var typeCombo = new Ext.form.ComboBox({
fieldLabel : '类型',
store : typeDS,
emptyText : '请选择一个类型',
allowBlank : false,
loadingText : 'searching...',
displayField : 'typeName',
mode : 'local',
editable : true,
valueField : 'typeId',
hiddenName : 'typeId',
anchor : '100%',
triggerAction : 'all'
});
3、然后再定义一个选择事件。
groupCombo.on('select', function() {
typeCombo.reset();
typeDS.proxy = new Ext.data.HttpProxy({
url : 'getTypesByUser.action?groupId='
+ groupCombo.getValue()
});
typeDS.load();
});
好了,现在我们就完成了这个二级联动的小应用。同理,三级联动同样可以通过这种方式来实现。
分享到:
相关推荐
Ext二级联动的完整项目例子.导入项目即可看到效果.
ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...
Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子
用Ext 2_0 combobox 做的省份和城市联动选择框 DOJO中国
代码如下:// 第一个下拉框 var parentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: ‘loadByParentid.action?parentid=1001’ }), reader: ... // 第二个下拉框 var childStore = new Ext.data
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...
# demoWeb 一个基于SpringMVC的web框架 1.0.5 从web项目迁移成maven项目 1.0.6 增加菜单框架ext实现,类路径...Mybatis使用二级缓存,增加redis实现 增加reactJs 增加Mybatis插件pageHelper,Mapper doc内有相关文档
# demoWeb 一个基于SpringMVC的web框架 1.0.5 ...Mybatis使用二级缓存,增加redis实现 增加reactJs 增加Mybatis插件pageHelper,Mapper 1.1.12 使用draft富文本编辑器 增加ant design 代码生成器功能增强
# demoWeb 一个基于SpringMVC的web框架 1.0.5 ...Mybatis使用二级缓存,增加redis实现 增加reactJs 增加Mybatis插件pageHelper,Mapper 1.1.12 使用draft富文本编辑器 增加ant design 代码生成器功能增强
首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个Javascript框架,因为它的核心其实是对HTML标签的增强。何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,...
ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——...
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...