自定义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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
JavaScript Date对象使用总结
May 14 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
vue实现五子棋游戏
May 28 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 已经成熟
2006/12/04 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
js同时按下两个方向键
2007/12/01 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Python中__new__与__init__方法的区别详解
2015/05/04 Python
使用Python绘制图表大全总结
2017/02/11 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python获取linux系统信息的三种方法
2020/10/14 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
大三毕业自我鉴定
2014/01/15 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
机关门卫制度
2014/02/01 职场文书
检查接待方案
2014/02/27 职场文书
毕业生对母校寄语
2015/02/26 职场文书
家长通知书家长意见
2015/06/03 职场文书