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教程 Tooltips
Sep 15 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
JavaScript执行机制详细介绍
Dec 06 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极大的增强功能和性能
2006/10/09 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
js返回顶部实例分享
2016/12/21 Javascript
js数组去重的hash方法
2016/12/22 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue二级路由设置方法
2018/02/09 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
二年级数学教学反思
2016/02/16 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers