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 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
前端性能优化及技巧
2016/05/06 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python书籍信息爬虫实例
2018/03/19 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
银行介绍信范文
2014/01/10 职场文书
农村党支部先进事迹
2014/01/14 职场文书
群众路线党课主持词
2014/04/01 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
Golang 对es的操作实例
2022/04/20 Golang