本文首发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 } }); |
显示效果图：
有问题可以发邮件讨论，源代码不方便贴出来 :)
<script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=3&lang=zh"></script> <script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/bshareC0.js"></script>
阅读(694) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
评论热议
扫一扫
3281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
