自定义ExtJS控件之下拉树和下拉表格附源码


Posted in Javascript onOctober 15, 2013

简介

在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

控件效果
自定义ExtJS控件之下拉树和下拉表格附源码 
自定义ExtJS控件之下拉树和下拉表格附源码

实例下载

实例中的资源为myeclipse项目,导入即可运行,自己添加ext的js和css文件,实例中没有ext的基础文件。
下载地址

Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 #Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 #Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 #Javascript
JS操作Cookies的小例子
Oct 15 #Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 #Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 #Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 #Javascript
You might like
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
详解python时间模块中的datetime模块
2016/01/13 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
大学自我鉴定
2013/12/20 职场文书
师德学习感言
2014/01/31 职场文书
社会实践评语
2014/04/28 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
园林技术专业求职信
2014/07/28 职场文书
房产公证书样本
2015/01/23 职场文书
党员活动总结
2015/02/04 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书