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中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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
mac下多个php版本快速切换的方法
2016/10/09 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python 实现控制鼠标键盘
2020/11/27 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
军校大学生个人的自我评价
2014/02/17 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
离婚协议书格式
2014/11/21 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
css样式important规则的正确使用方式
2022/06/10 HTML / CSS