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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
微信支付扫码支付php版
2016/07/22 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
js 操作符汇总
2014/11/08 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
家长对孩子评语
2014/01/30 职场文书
学习党代会心得体会
2014/09/05 职场文书
经理助理岗位职责
2015/02/02 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
Python面向对象之成员相关知识总结
2021/06/24 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
Python sklearn分类决策树方法详解
2022/09/23 Python