Add source code to the pull tree and drop-down tables under the custom ExtJS Control

Introduction

In the official Ext example, only the drop-down list control is available, but only the drop-down list in the actual business cannot meet the requirements. For example, the drop-down tree and drop-down table are common controls, it is difficult for people who just use Ext to customize a control. In fact, it is not so difficult to read the official source code. The code for the drop-down tree is as follows:
Copy codeThe Code is as follows:
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
});
// Register the event to select the selected value
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 of the drop-down tree is very simple. You only need to integrate the Ext. form. field. ComboBox class and then rewrite the createPicker method. Similarly, the code of the drop-down table is as follows:
Copy codeThe 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: 'drop-down table ',
Store: me. store,
Frame: true,
Resizable: true,
Columns :[{
Text: '# id ',
DataIndex: 'id'
},{
Text: 'name ',
DataIndex: 'name'
},{
Text: 'description ',
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 );
}
}
}


});

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

The development of the drop-down tree and drop-down table looks so easy. As long as you have thoroughly studied the Ext operating mechanism, everything will be so easy.

Control Effect
 


Download instance

The resources in the instance are myeclipse projects, which can be imported and run. You can add the js and css files of ext by yourself. The instance does not contain the basic files of ext.