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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
理解javascript正则表达式
Mar 08 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
详解Vue的sync修饰符
May 15 Vue.js
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
js实现微信分享代码
2020/10/11 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
小程序实现多列选择器
2019/02/15 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
python中正则的使用指南
2016/12/04 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
八年级历史教学反思
2014/01/10 职场文书
欢迎家长标语
2014/10/08 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
寒山寺导游词
2015/02/03 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
小学生教师节广播稿
2015/08/19 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
Python读写yaml文件
2022/03/20 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫