The drop-down box tree effect (self-writing) implemented by ComboBoxTree in Extjs _ extjs

In a recently involved project, you need to implement the ComboBoxTree effect. Because Extjs does not have this effect, you can read other people's documents and write one by yourself, if you are interested, you can refer to a recently involved project in Kazakhstan to implement the ComboBoxTree effect. First, let's take a look at the effect ......

There is no such effect in Extjs, so you have to write it yourself, read other people's information on the network, and summarize it again, modify it, the Code is as follows:

The Code is as follows:

Ext. ux. TreeCombo = Ext. extend (Ext. form. ComboBox ,{
Constructor: function (cfg ){
Cfg = cfg | {};
Ext. ux. TreeCombo. superclass. constructor. call (this, Ext. apply ({
MaxHeight: 300,
Editable: false,
Mode: 'local ',
TriggerAction: 'all ',
RootVisible: false,
SelectMode: 'all'
}, Cfg ));
},
Store: new Ext. data. SimpleStore ({
Fields: [],
Data: [[]
}),
// Rewrite onViewClick so that the Expand Tree node does not close the drop-down box
OnViewClick: function (doFocus ){
Var index = this. view. getSelectedIndexes () [0], s = this. store, r = s. getAt (index );
If (r ){
This. onSelect (r, index );
}
If (doFocus! = False ){
This. el. focus ();
}
},
Tree: null,
// Hide the value
HiddenValue: null,
GetHiddenValue: function (){
Return this. hiddenValue;
},
GetValue: function () {// added applicability, same as the original combo component
Return this. hiddenValue;
},
SetHiddenValue: function (code, dispText ){
This. setValue (code );
Ext. form. ComboBox. superclass. setValue. call (this, dispText );
This. hiddenValue = code;
},
InitComponent: function (){
Var _ this = this;
Var tplRandomId = 'depttcombo _ '+ Math. floor (Math. random () * 1000) + this. tplId
This. tpl ="

"
This. tree = new Ext. tree. TreePanel ({
Border: false,
EnableDD: false,
EnableDrag: false,
RootVisible: _ this. rootVisible | false,
AutoScroll: true,
TrackMouseOver: true,
Height: _ this. maxHeight,
Lines: true,
SingleExpand: true,
Root: new Ext. tree. AsyncTreeNode ({
Id: _ this. rootId,
Text: _ this. rootText,
IconCls: 'ico-root ',
Expanded: true,
Leaf: false,
Border: false,
Draggable: false,
SingleClickExpand: false,
Hide: true
}),
Loader: new Ext. tree. TreeLoader ({
NodeParameter: 'id ',
RequestMethod: 'get ',
DataUrl: _ this. url
})
});
This. tree. on ('click', function (node ){
If (_ this. selectMode = 'leaf' & node. leaf = true) | _ this. selectMode = 'all '){
If (_ this. fireEvent ('beforeselect ', _ this, node )){
_ This. fireEvent ('select', _ this, node );
}
}
});
This. on ('select', function (obj, node ){
Var dispText = node. text;
Var code = node. id;
Obj. setHiddenValue (code, dispText );
Obj. collapse ();
});
This. on ('expand', function (){
This. tree. render (tplRandomId );
});
Ext. ux. TreeCombo. superclass. initComponent. call (this );
}
})
Ext. reg ("treecombo", Ext. ux. TreeCombo );

Then, add the Extjs class library to the homepage.

The Code is as follows: