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

简介

在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 ,
框架：true，
可调整大小：true，
列：[{
文本：'#ID'，
dataIndex：'id'
}，{
文本: '名称' ,
dataIndex : '名称'
},{
text : '描述' ,
dataIndex : 'desc'
}],
selModel: {
模式：me.multiSelect？'简单'：'单'
}，
浮动：true，
隐藏：true，
宽度：300，
列行：true，
focusOnToFront: false
});
me.mon(picker, {
itemclick: me.onItemClick,
刷新: me.onListRefresh,
范围: me
}); 🎜>
me.mon(picker.getSelectionModel(), {
选择前: me.onBeforeSelect,
取消选择前: me.onBeforeDeselect,
selectionchange: me.onListSelectionChange,
范围: me
});
this.picker;
返回选择器;
},

onItemClick: function(picker, record){
/*
* If我们正在进行单选，当
* 单击所选元素时，选择更改事件不会触发。在这里检测一下。
*/
var me = this,
selection = me.picker.getSelectionModel().getSelection(),
valueField = me.valueField;

if (!me.multiSelect && Selection.length) {
if (record.get(valueField) === Selection[0].get(valueField)) {
// 确保如果显示值只是部分内容，我们也会更新
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;
// 仅当未从 setValue 调用选择时才对选择做出反应
// 展开（忽略其他地方触发的对选择模型的更改）
if (!me.ignoreSelection && me. isExpanded) {
if (!isMulti) {
Ext.defer(me.collapse, 1, me);
}
/*
* 仅当我们处于多选模式或有
* 一个选择时才在此处设置值。否则 setValue 将使用空值
* 调用，这将导致更改事件触发两次。
*/
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) {
// 突出显示最后选定的项目并将其滚动到视图
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方法。

开发下拉树和下拉表格看起来很容易，只需研究透了Ext的运行机制一切，都会so easy


控制效果
 


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

下载地址