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 面向对象特性
Dec 28 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
微信小程序云开发之模拟后台增删改查
May 16 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
php4的彩蛋
2006/10/09 PHP
PHP学习之数组值的操作
2011/04/17 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python contextlib模块使用示例
2015/02/18 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python实现图片文件批量重命名
2020/03/23 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
python实现滑雪游戏
2020/02/22 Python
什么是python的函数体
2020/06/19 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
绩效工资分配方案
2014/01/18 职场文书
师范大学生求职信
2014/06/13 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
春风化雨观后感
2015/06/11 职场文书
祝酒词范文
2015/08/12 职场文书