Customized ExtJS control drop-down tree and drop-down table with source code_extjs

Introduction

In the official Ext example, there is only a drop-down list control, but in actual business, only drop-down lists cannot meet the needs. Drop-down trees and drop-down tables are very common controls. For those who are new to using Ext, it is difficult to customize a control. In fact, some things will not be so difficult if you read more official source code. The following is the code for the drop-down tree:

Copy the code The code is as follows:

Ext.define(' ComboTreeBox',{
extend : 'Ext.form.field.ComboBox',

multiSelect : true,

createPicker : function(){
var me = this;

//Create tree control
var picker = Ext.create('Ext.tree.Panel', {
store: me.store,
rootVisible: false,
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating: true,
hidden: true,
focusOnToFront: false
});
//Registered events are used to select the value selected by the user
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();
}
}
}
});

The code for the drop-down tree is very Simple, just integrate the Ext.form.field.ComboBox class, and then rewrite the createPicker method. The same is true for the drop-down form. The following is the code for the drop-down form:

Copy code The code is as follows:

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的基础文件。
下载地址