双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒,抽取你的专属好礼

— 惊喜奖品抢先看 —

Extjs中Combobox两级联动,第二个combobox加载数据的问题

程序媛小李 程序媛小李 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
详细描述在此
http://blog.csdn.net/aaoxue/article/details/8556202

两个combobox的store的数据都在前台写好,思路是,第一个combobox选值后就对第二个store根据条件进行过滤,将第二个combobox展开,问题是,直接展开没有问题,当我再点击第二个组件的下拉框时,展开的没有过滤之前store的数据。如何解决?
	
//性别store
var sexStore = Ext.create('Ext.data.Store', {
fields: ['code', 'name'],
data : [
{"code":"0", "name":"female"},
{"code":"1", "name":"male"}
]
});
//所有人Store
var people = Ext.create('Ext.data.Store', {
fields: ['code','sexcode', 'name'],
data : [
{"code":"0", "sexcode":"0", "name":"li"},
{"code":"1","sexcode":"0", "name":"zhang"},
{"code":"2","sexcode":"1", "name":"sun"},
]
});
//combobox显示指定性别store
var peopleChoose = Ext.create('Ext.data.Store', {
fields: ['code','sexcode', 'name']
});
// 选择性别 combobox
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Sex',
store: sexStore,
id:'combo.ChooseSex',
queryMode: 'local',
displayField: 'name',
valueField: 'code',
renderTo: Ext.getBody(),
listeners:{
'change':function(thisField,newValue,oldValue,epots){
if(newValue!=null){
Ext.getCmp('combo.ChoosePeople').setDisabled(false);
people.filterBy(function(record){
return record.get('sexcode')==newValue;
});
Ext.getCmp('combo.ChoosePeople').expand();
//使用peopleStore时
// peopleChoose.removeAll();
// people.each(function(record){
// //过滤通过性别选择符合的人员数据
// if(record.get('sexcode')==newValue){
// peopleChoose.add(record);
// }
// });
}else{
Ext.getCmp('combo.ChoosePeople').setDisabled(true);
}
}
}
});

Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose People',
//store: peopleChoose,
store:people,
disabled:true,
id:'combo.ChoosePeople',
queryMode: 'local',
displayField: 'name',
valueField: 'code',
autoSelect:false,
renderTo: Ext.getBody()
});
...全文

相关推荐

ExtJS Combobox二级联动列子

Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子

IT_rubbish

实现Extjs4下拉三级联动与Struts2数据交互

ExtJS 4中的ComboBox组件是用于表单输入的重要工具,它不仅提供了自动完成的功能,还能增强用户体验。ComboBox组件允许用户在输入文本的同时,从下拉列表中选择预定义的选项,这有助于减少用户输入错误和加快数据输入速度。一个典型的ComboBox通常包含一个文本输入区域,一个展开箭头以及一个可选的下拉列表。在实际应用中,ComboBox组件可以非常灵活地通过配置属性来适应不同场景的需求。例如,通过设置queryMode属性,可以定义ComboBox查询模式,支持本地过滤(local。

Aurora曙光

Extjs4.0 ComboBox如何实现三级联动

很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在3.x中Load数据时用reload,但是在extjs4.0中要使用load来获取数据。如下图: 代码部分 先看HTML代码: <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MHZG.NET-

weixin_38729108

extjs的ComboBox 2级联动

NULL 博文链接:https://wwwzhouhui.iteye.com/blog/701745

weixin_38669628

Extjs学习笔记(-):ComboBox联动

NULL 博文链接:https://chenxueyong.iteye.com/blog/336117

weixin_38669628
评论 2
收藏 已收藏
分享
返回顶部
程序媛小李
JavaScript 87,984 成员 224,680 内容