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中sort()方法的用法
Nov 04 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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
smarty内置函数foreach用法实例
2015/01/22 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
详解python播放音频的三种方法
2019/09/23 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
管理站站长岗位职责
2013/11/27 职场文书
旷课检讨书大全
2014/01/21 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python