原文出处:http://www.cnitblog.com/yemoo/archive/2009/07/28/44724.html
更新Ext ComboBox的列表项,直接通过更新其Store即可,而且可以通过Filter对store数据进行过滤只显示符合特定条件的列表项。
今天项目正好需要这个了,页面4个ComboBox的列表随着页面操作需要不断更新,我采用的方法也正是filter,本来以为一个很简单的问题,但整整郁闷了我两个多小时,开始发现filter之后虽然store的内容已经发生了变化,但ComboBox的列表项却仍然是原来的,偶以为是自己程序那个地方出错了,结果查了半天也没有找到什么错误。
后来测试突然发现只是第一次点击显示ComboBox的时候没有显示过滤后的内容,而从第二次开始每次都能获显示flter后的内容。
这个问题真是怪了,我猜想应该是EXT本身的问题,开始只是想触发一个expand事件,但发现问题并不那么简单,花费半个小时也没有想到好的办法,只好到Ext Forum上求助了,先search了一下ComboBox Filter,发现了已经有很多人遇到了与我同样的问题,看来真的是Ext的问题了,看了几篇帖子,找到了一个比较有效的解决办法:filter之后删除原store的数据快照。
如:
继续思考,如果我把它的snapshot保存起来,需要用clearFilter恢复数据时再把它的snapshot给还原了岂不就解决了吗?经过测试,果真成功!
为了使用方便、降低重复代码量,偶对comboBox进行了简单的封装,除了解决上面filter的问题,还实现了通过document.forms[0].combox.value获取和设定comboBox的功能,通过选择ComboBox的列表值会同步更新form表单中combox的值。
使用方法示例:
html:
JS:
封装代码:
今天项目正好需要这个了,页面4个ComboBox的列表随着页面操作需要不断更新,我采用的方法也正是filter,本来以为一个很简单的问题,但整整郁闷了我两个多小时,开始发现filter之后虽然store的内容已经发生了变化,但ComboBox的列表项却仍然是原来的,偶以为是自己程序那个地方出错了,结果查了半天也没有找到什么错误。
后来测试突然发现只是第一次点击显示ComboBox的时候没有显示过滤后的内容,而从第二次开始每次都能获显示flter后的内容。
这个问题真是怪了,我猜想应该是EXT本身的问题,开始只是想触发一个expand事件,但发现问题并不那么简单,花费半个小时也没有想到好的办法,只好到Ext Forum上求助了,先search了一下ComboBox Filter,发现了已经有很多人遇到了与我同样的问题,看来真的是Ext的问题了,看了几篇帖子,找到了一个比较有效的解决办法:filter之后删除原store的数据快照。
如:
store.filter();
delete store.snapshot;
马上试了一下还真可以,兴奋了半天之后却又遇到了另一个问题,即store.clearFilter不能还原到原来的数据了。思考了一下应该是store.snapshot保存了最原始的数据,这样一delete肯定就找不到原始数据了,因此也就不能恢复了。这可够郁闷,删也不是不删也不是!delete store.snapshot;
继续思考,如果我把它的snapshot保存起来,需要用clearFilter恢复数据时再把它的snapshot给还原了岂不就解决了吗?经过测试,果真成功!
为了使用方便、降低重复代码量,偶对comboBox进行了简单的封装,除了解决上面filter的问题,还实现了通过document.forms[0].combox.value获取和设定comboBox的功能,通过选择ComboBox的列表值会同步更新form表单中combox的值。
使用方法示例:
html:
<form name="testFrm">
<input type="text" name="userlList" id="combox" width="150" />
</form>
<input type="text" name="userlList" id="combox" width="150" />
</form>
JS:
var data=[[1,'用户一'],[2,'用户二']];
var combox=new makeCombo('combox',data,'用户列表');
//获取userList的值
var curValue=document.forms['testForm'].userList.value;
//设定userList当前值
document.forms['testForm'].userList.value=2;
var combox=new makeCombo('combox',data,'用户列表');
//获取userList的值
var curValue=document.forms['testForm'].userList.value;
//设定userList当前值
document.forms['testForm'].userList.value=2;
封装代码:
/**
* 根据数据生成combox到指定的位置
* id:容器,data:数据,text:文本 width:ComboBox的宽度,默认为所绑定元素的宽度
*/
function makeCombo(id,data,text,width){
var container=Ext.get(id);
if(!container)return;
var realInput; //保存值的input
return new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
//解决filter第一次无效的bug,保存原数据快照到另一个变量
listeners:{datachanged:function(){if(!this.mySnap)this.mySnap=this.snapshot;delete this.snapshot}},
fields: ['value', 'text'],
data:data||[]
}),
editable:false,
valueField:'value',
displayField: 'text',
typeAhead: true,
lazyInit: false,
width:width||container.getComputedWidth(),
mode: 'local',
listeners:{
render:function(_this){
realInput=Ext.DomHelper.insertAfter(container,{tag: 'input',type:'hidden',name:_this.getName(),value:_this.getValue()})
realInput.onpropertychange=function(){_this.setValue(this.value)}; //真实表单联动模拟表单
container.dom.removeAttribute('name');
_this.clearFilter=function(){ //扩展一个方法还原store
_this.store.snapshot=_this.store.mySnap;
_this.store.clearFilter();
}
},
select:function(combo,rec,index){ //模拟表单联动真实表单
realInput.value=rec.get('value');
}
},
triggerAction: 'all',
emptyText: "请选择"+(text||''),
selectOnFocus: true,
applyTo: container
});
}
* 根据数据生成combox到指定的位置
* id:容器,data:数据,text:文本 width:ComboBox的宽度,默认为所绑定元素的宽度
*/
function makeCombo(id,data,text,width){
var container=Ext.get(id);
if(!container)return;
var realInput; //保存值的input
return new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
//解决filter第一次无效的bug,保存原数据快照到另一个变量
listeners:{datachanged:function(){if(!this.mySnap)this.mySnap=this.snapshot;delete this.snapshot}},
fields: ['value', 'text'],
data:data||[]
}),
editable:false,
valueField:'value',
displayField: 'text',
typeAhead: true,
lazyInit: false,
width:width||container.getComputedWidth(),
mode: 'local',
listeners:{
render:function(_this){
realInput=Ext.DomHelper.insertAfter(container,{tag: 'input',type:'hidden',name:_this.getName(),value:_this.getValue()})
realInput.onpropertychange=function(){_this.setValue(this.value)}; //真实表单联动模拟表单
container.dom.removeAttribute('name');
_this.clearFilter=function(){ //扩展一个方法还原store
_this.store.snapshot=_this.store.mySnap;
_this.store.clearFilter();
}
},
select:function(combo,rec,index){ //模拟表单联动真实表单
realInput.value=rec.get('value');
}
},
triggerAction: 'all',
emptyText: "请选择"+(text||''),
selectOnFocus: true,
applyTo: container
});
}
相关推荐
用Ext 2.0 combobox 做的省份和城市联动选择框的例程
TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者列表 ...
用EXT来实现下拉框ComboBox 下拉框可以实现分页
这次只单独打包了本例子的html文件,大家注意一下js和css的路径就可以了
ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...
该资源是war包,里面包括ComboBox中的各个参数, 详细讲解在我的文档中有
基于Ext3.4的一个扩展Combobox组件
ext关于form表单和combobox的例子
全部代码 注意路径 博文链接:https://avs110.iteye.com/blog/1156428
Ext中的Combobox下来框在EditGrid中的应用。Combobox显示值问题得以解决。
Ext 异步加载添加 删除节点 修改combobox选择项,相当好的东西,值得参考!希望对你有用!
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046190
首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;
在项目中再次碰到了问题,是Combobox中的值如果是直接绑定很简单。简单添加项行了。代码如下: <ext ID=ComBox_SecretsLevel runat=server FieldLabel=密级 Width=250 EmptyText=请选择密级…> <ext Text=公开 ...
NULL 博文链接:https://dengli19881102.iteye.com/blog/904770
NULL 博文链接:https://tianhengbao.iteye.com/blog/816208
Ext.form.field.ComboBox结合Java、JSON实现AutoComplete
NULL 博文链接:https://zhcl321.iteye.com/blog/1317526
修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...
AjaxControlToolkit ComboBox支持中文检索dll