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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
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
动易数据转成dedecms的php程序
2007/04/07 PHP
discuz安全提问算法
2007/06/06 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
php中大括号作用介绍
2012/03/22 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
js new Date()实例测试
2019/10/31 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
python中list列表的高级函数
2016/05/17 Python
Python正则表达式常用函数总结
2017/06/24 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Python3并发写文件与Python对比
2019/11/20 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
运动会开幕式主持词
2015/07/01 职场文书
投诉信回复范文
2015/07/03 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python