自定义ExtJS控件之下拉树和下拉表格附源码
2013-10-15 00:00
507 查看
简介
在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,像下拉树和下拉表格都是很常见的控件,对于刚使用Ext的人来说,自定义一个控件好难,其实多读官方的源码有些事情就不会那么难了。下面是下拉树的代码:
下拉树的代码很简单,只要集成Ext.form.field.ComboBox类,然后重写createPicker方法就可以了,同理下拉表格也是如此,下面是下拉表格的代码:
下拉表格也是继承了Ext.form.field.ComboBox这个类,重写了createPicker方法。
开发下拉树和下拉表格看起来so easy,只要研究透了Ext的运行机制,一切都会so easy
控件效果
实例下载
实例中的资源为myeclipse项目,导入即可运行,自己添加ext的js和css文件,实例中没有ext的基础文件。
下载地址
在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,像下拉树和下拉表格都是很常见的控件,对于刚使用Ext的人来说,自定义一个控件好难,其实多读官方的源码有些事情就不会那么难了。下面是下拉树的代码:
Ext.define('ComboTreeBox',{ extend : 'Ext.form.field.ComboBox', multiSelect : true, createPicker : function(){ var me = this; //创建树控件 var picker = Ext.create('Ext.tree.Panel', { store: me.store, rootVisible: false, selModel: { mode: me.multiSelect ? 'SIMPLE' : 'SINGLE' }, floating: true, hidden: true, focusOnToFront: false }); //注册事件用于选择用户选择的值 me.mon(picker, { itemclick: me.onItemClick, refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), { beforeselect: me.onBeforeSelect, beforedeselect: me.onBeforeDeselect, selectionchange: me.onListSelectionChange, scope: me }); this.picker = picker; return picker; }, onItemClick: function(picker, record){ /* * If we're doing single selection, the selection change events won't fire when * clicking on the selected element. Detect it here. */ var me = this, selection = me.picker.getSelectionModel().getSelection(), valueField = me.valueField; if (!me.multiSelect && selection.length) { if (record.get(valueField) === selection[0].get(valueField)) { // Make sure we also update the display value if it's only partial me.displayTplData = [record.data]; me.setRawValue(me.getDisplayValue()); me.collapse(); } } } });
下拉树的代码很简单,只要集成Ext.form.field.ComboBox类,然后重写createPicker方法就可以了,同理下拉表格也是如此,下面是下拉表格的代码:
Ext.define('ComboGridBox',{ extend : 'Ext.form.field.ComboBox', multiSelect : true, createPicker : function(){ var me = this; var picker = Ext.create('Ext.grid.Panel', { title : '下拉表格', store: me.store, frame : true, resizable : true, columns : [{ text : '#ID', dataIndex : 'id' },{ text : '名称' , dataIndex : 'name' },{ text : '描述' , dataIndex : 'desc' }], selModel: { mode: me.multiSelect ? 'SIMPLE' : 'SINGLE' }, floating: true, hidden: true, width : 300, columnLines : true, focusOnToFront: false }); me.mon(picker, { itemclick: me.onItemClick, refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), { beforeselect: me.onBeforeSelect, beforedeselect: me.onBeforeDeselect, selectionchange: me.onListSelectionChange, scope: me }); this.picker = picker; return picker; }, onItemClick: function(picker, record){ /* * If we're doing single selection, the selection change events won't fire when * clicking on the selected element. Detect it here. */ var me = this, selection = me.picker.getSelectionModel().getSelection(), valueField = me.valueField; if (!me.multiSelect && selection.length) { if (record.get(valueField) === selection[0].get(valueField)) { // Make sure we also update the display value if it's only partial me.displayTplData = [record.data]; me.setRawValue(me.getDisplayValue()); me.collapse(); } } }, matchFieldWidth : false, onListSelectionChange: function(list, selectedRecords) { var me = this, isMulti = me.multiSelect, hasRecords = selectedRecords.length > 0; // Only react to selection if it is not called from setValue, and if our list is // expanded (ignores changes to the selection model triggered elsewhere) if (!me.ignoreSelection && me.isExpanded) { if (!isMulti) { Ext.defer(me.collapse, 1, me); } /* * Only set the value here if we're in multi selection mode or we have * a selection. Otherwise setValue will be called with an empty value * which will cause the change event to fire twice. */ if (isMulti || hasRecords) { me.setValue(selectedRecords, false); } if (hasRecords) { me.fireEvent('select', me, selectedRecords); } me.inputEl.focus(); } console.log(me.getValue()); }, doAutoSelect: function() { var me = this, picker = me.picker, lastSelected, itemNode; if (picker && me.autoSelect && me.store.getCount() > 0) { // Highlight the last selected item and scroll it into view lastSelected = picker.getSelectionModel().lastSelected; itemNode = picker.view.getNode(lastSelected || 0); if (itemNode) { picker.view.highlightItem(itemNode); picker.view.el.scrollChildIntoView(itemNode, false); } } } });
下拉表格也是继承了Ext.form.field.ComboBox这个类,重写了createPicker方法。
开发下拉树和下拉表格看起来so easy,只要研究透了Ext的运行机制,一切都会so easy
控件效果
实例下载
实例中的资源为myeclipse项目,导入即可运行,自己添加ext的js和css文件,实例中没有ext的基础文件。
下载地址
相关文章推荐
- 自定义ExtJS控件之下拉树和下拉表格附源码
- 自定义ExtJS控件之Ext下拉树和Ext下拉表格
- 自定义ExtJS控件之Ext下拉树和Ext下拉表格
- 源码推荐:自定义下拉刷新动画 弹性的分段选择控件
- Java实现的自定义可编辑表格控件(支持汇总、滚动、增行、删行、小数、日期、下拉列表、参照等)
- 源码推荐:自定义下拉刷新动画 弹性的分段选择控件
- 源码推荐:仿写映客直播 ,快速切换主题 ,星星评分控件,表格样式,可以横向移动的表格, 仿微信键盘-
- 自定义下拉列表控件
- iOS cocos2d实现自定义button(按钮特效)控件效果源码
- Android自定义DataGridView数据表格控件
- 源码推荐(1.5):自定义相机控件,仿reddit ama的动画
- Android自定义表格控件
- DataSet&DataTable如何绑定下拉列表控件获取不重复的值,如何添加一列自定义文字,并在下拉列表控件中显示自定义文字[winform学习实例]
- ExtJs之表格控件入门
- ExtJS基础知识总结:自定义日历和ComboBox控件(二)
- TextBox自定义复合控件(复合验证TextBox)有源码下载
- Android Jamendo开源在线音乐播放器源码分析九 ViewFlipper及自定义布局控件的分析
- extjs实现选择多表自定义查询功能 前台部分(ext源码)
- 自定义IP控件添加到MINIGUI源码中