Custom ExtJS control under the pull down tree and the drop down table with the source

Introduction to the

In the official Ext example there are only drop-down list controls, but in the real world there are only drop-down lists that don't meet the requirements. Drop-down trees and drop-down tables are common controls. Here is the code for the drop-down tree:

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

multiSelect : true, 

createPicker : function(){ 
var me = this; 

//Create a 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 
}); 
//The registration event is 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){ 
 
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 as simple as integrating the Ext.form.field.ComboBox class and overriding the createPicker method. The same goes for the drop-down table. Here's the code for the drop-down table:

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

multiSelect : true, 

createPicker : function(){ 
var me = this; 

var picker = Ext.create('Ext.grid.Panel', { 
title : ' The drop-down form ', 
store: me.store, 
frame : true, 
resizable : true, 
columns : [{ 
text : '#ID', 
dataIndex : 'id' 
},{ 
text : ' The name of the ' , 
dataIndex : 'name' 
},{ 
text : ' describe ' , 
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){ 
 
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); 
} 
 
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); 
} 
} 
} 


}); 

The drop-down table also inherits the Ext.form.field.ComboBox class and overrides the createPicker method.

Developing drop-down trees and drop-down tables looks so easy, as long as you understand how Ext works

The control effect
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/201310151650152.gif? 2013915165040 ">  
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/201310151651133.gif? 2013915165131 ">

Instance to download

The resources in the instance are myeclipse project, which can be imported and run. You can add ext js and CSS files by yourself. There is no ext base file in the instance.
(link: http://xiazai.jb51.net/201310/yuanma/picker_jb51.net.rar)