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字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
vue 注册组件的使用详解
May 05 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
AJAX学习笔记
May 18 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 异常处理Ⅳ过程图解
2019/10/18 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
商场总经理岗位职责
2014/02/03 职场文书
介绍信样本
2015/01/31 职场文书
雷锋的故事观后感
2015/06/10 职场文书
六一亲子活动感想
2015/08/07 职场文书