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 相关文章推荐
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
webpack的pitching loader详解
Sep 23 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php中socket通信机制实例详解
2015/01/03 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
拖动一个HTML元素
2006/12/22 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
js Dialog 实践分享
2012/10/22 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
教职工代表大会主持词
2014/04/01 职场文书
外联部演讲稿
2014/05/24 职场文书
承诺函范文
2015/01/21 职场文书
干部理论学习心得体会
2016/01/21 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL