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设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
jQuery实现简单日历效果
Jul 05 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
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
django跳转页面传参的实现
2020/09/17 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
个人求职信范例
2014/01/29 职场文书
歌唱比赛主持词
2014/03/18 职场文书
老师对学生的寄语
2014/04/09 职场文书
个人合作协议书范本
2014/04/18 职场文书
岗位职责说明书
2014/05/07 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
教师工作表现评语
2014/12/31 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Python进行区间取值案例讲解
2021/08/02 Python
实现GO语言对数组切片去重
2022/04/20 Golang
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python