extjs 列表框(multiselect)的动态添加列表项的方法


Posted in Javascript onJuly 31, 2009

因为它这个是创建时自动加载的ArrayStore(关键字是:data: ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要根据第一个列表框内容动态的加载,因此要在选择第一个列表框的内容时,动态填充后两个的内容.我比较佩服exjts的示例写作人员,这些应该在示例中体现的功能,他们都没有写到,包括之前的2.2版本的示例,网上也没有搜索到,害我找了一天如何动态控制列表数据的功能.首先说明一下,我的方法也不是官方的方法,只是自己灵机一动想到的,下面是动态增加列表项的方法.
在方法之前我的关于multiselect对象的store是这样定义的:

flowDs = new Ext.data.ArrayStore({ 
data: [[123,123]], 
fields: ['value','text'] 
});

(1)var toflowStore = msForm.getForm().findField('toflow').store; //根据名称得到multiselect对象的store对象;
(2)创建一个Ext.data.Record对象,这正在我想了好久的增加方法,也怪自己太笨了:
var record = new Object(); 
record.value = "2"; 
record.text = "3"; 
var records = new Ext.data.Record(record);

(3) 将创建的Ext.data.Record对象加至multiselect的store对象中:
toflowStore.add(record1);
通过以上三步就可以为列表multisleect动态增加列表项了,提醒一下删除某项可以通过remove()/removeAll()方法,具体的使用方法可以通过示例代码的ItemSelector.js中查到.
通过以上分析后,大致可以简单估计到multiselect的创建规则,在store中有一个属性fields: ['value','text'],则在创建时,系统会通过循环的方式将属性data:[[123,123]]中的内容创建为object对象,然后写到时它的store对象中,类似下面的代码:
var item = [],itemObj,record; 
for(var i = 0; i< this.data.length;i++){ 
item = this.data[i]; 
itemObj = new Object(); 
itemObj.value = item[0]; 
itemObj.text = item[1]; 
record = new Ext.data.Record(itemObj); 
this.store.add(record); 
}

以上只是我腓臆的猜测,具体extjs的工程师是不是如此设计他们的程序,还没有仔细研究.
Javascript 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 #Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 #Javascript
Javascript 学习笔记 错误处理
Jul 30 #Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 #Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 #Javascript
javascript 写的一个简单的timer
Jul 30 #Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
python语言元素知识点详解
2019/05/15 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python字节单位转换实例
2019/12/05 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
日语翻译个人求职的自我评价
2013/10/14 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
个人担保书范文
2014/05/20 职场文书
广播节目策划方案
2014/05/23 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers