本文首发CUBLOG,
作者:z_jingwei
Email:
z_jingwei@163.com
刚刚用Ext开发了一个选择组件,允许用户从左侧的列表中向右侧添加选项。
总思路是,在一个BorderLayout的Panel中添加三个子Panel:
west: 未选择列表框 GridPanel
center: 按钮列表 Panel
east: 已选择列表框 GridPanel
在主Panel中注册selectSome, unselectSome, selectAll, unselectAll事件。
点击中间按钮或双击列表中记录时,触发对应的事件。
主要的难度在于理解Ext的事件模型,用到的方法有addEvents和on。
另外就是如何通过组件的构造函数来初始化三个子组件,需要注意变量的作用域。出乎意料的是,JS的检查没有想像的严,很多地方都直接用了this。
两个列表需要在构造时,传入store来得到初始化数据。
至于从一个列表向另一上列表中添加记录是比较简单的,用到的方法:
GridPanel: getStore, getSelectionModel
Store: add, remove
RowSelectionModel: getCount, getSelections, selectAll
全总移动时,可以使用sm的selectAll方法选择全部,再调用selectSome方法提高复用。
创建代码:
sp = new Zjw.SelectPanel( { selectedList: { id: Ext.id(), store: store, width: 200 }, unselectList: { id: Ext.id(), store: store1, width: 200 } }); |
显示效果图:
有问题可以发邮件讨论,源代码不方便贴出来 :)
相关热门文章
给主人留下些什么吧!~~
评论热议