ExtJS 3 Custom Combotree

ExtJS 3 Custom Combotree

/** * Custom drop-down tree that automatically locates tree nodes when initializing values is supported. * Performance issues are not yet considered. Inheriting from Ext.form.ComboBox is also wasteful. * Cu.get () in the code is the custom asynchronous request method. * @author Linzongxue * @create_date 2011-12-13 */ext.ux.comboboxtree = Ext.extend (Ext.form.ComboBox, {//Tree configuration Items Dataurl: NULL,//Gets the URL of the full path of the ID of a node with the url//of all nodes of the tree, the format of the return value should be: parentid1/parentid2/parentid3/. /Node id//If you do not set this value, the drop-down tree does not automatically locate the node and display the text nodepathurl:null,loader:null,root when it is initialized: {},rootvisible:false,// Tree selection mode Rootselectable:false,//The root node is optional, default is Falsefolderselectable:true,//directory is optional, default is Trueleafselectable:true,// Whether the leaf is optional, the default is Trueshowfullpath:false,//whether to show the full path rootvalue:undefined,///The value of the root node (usually the root node value is not the same as the normal node value, if the same does not need to set this value)// The configuration item of the original combo class Store:new Ext.data.SimpleStore ({fields:[],data:[[]}), mode: ' Local ', triggeraction: ' All ', editable: False,forceselection:true,tree:null,//tree control, initializing//private in the Expand method: To prevent combo contraction, control this property value in the event of the tree Preventcollapse:false , Initcomponent:function () {This.treeid = Ext.id (); this.height = This.height | | 200;this.tpl = String.Format (' <tpl for ="." ><div id= "{0}" style= "height:{1}px "></div></tpl>", This.treeid, This.height); Ext.ux.ComboBoxTree.superclass.initComponent.call (this);},setvalue:function (value) {if (Ext.isobject (value)) {// Select This.dosetvalue when clicking on the tree node (value);} else{///Just set a value, get the path of this value from the background, and select this node in the tree//console.log (value); if (!this.tree) This.inittree (); if (value = = = This.tree.root.id | | (ext.isdefined (this.rootvalue) && value = = This.rootvalue)) {//root node This.tree.root.select (); This.dosetvalue (this.root); return;} var url = this.nodepathurl;if (!url) {This.dosetvalue ({id:value}); return;} Cu.get (URL, {id:value}). Done (function (path) {//from background request get id path = '/' + This.root.id + (Path.indexof ('/') = = 0? ': '/') + Path;var combotree = This;this.tree.selectpath (path, ' id ', function (success, node) {Combotree.dosetvalue ( Success?    node:null);});}, this);}    },//private: Set value, parameter value should be an object Dosetvalue:function (value) {var id = value? value.id: "; var text = value?    Value.text: "; if (value && Value.loader | | value.aTtributes) {//Is the tree node var isrootnode = (Value.id = = this.tree.root.id);    if (Isrootnode && ext.isdefined (this.rootvalue)) {id = this.rootvalue; } if (This.showfullpath) {text = Isrootnode?            '/': Value.getpath (' text '). Replace ('/' + This.tree.root.text, '); }}this.value = Id;if (This.hiddenfield) {this.hiddenField.value = ID;//set form field}this.lastselectiontext = Text;this.el.dom . value = text;    The value displayed is this.fireevent (' select ', this, value);    }, Getvalue:function () {return ext.isdefined (this.value)? This.value: '; },//Get the Selected tree node Getvaluenode:function () {return this.tree? This.tree.getSelectionModel (). Getselectednode (): null;}, Gettext:function () {return This.lastselectiontext | | ';},reload:function () {if (!this.tree) Return;var node = This.tree.getSelectionModel (). Getselectednode (); var path = Node? Node.getpath (): Null;this.tree.getloader (). Load (this.tree.root, function () {if (path) {This.tree.selectPath (path);}} This); this.preventcollapse = true;},//private: Determines whether to shrink collapse:function () {if, based on the Preventcollapse property This.preventcollapse) {this.preventcollapse = False;return;} Ext.ux.ComboBoxTree.superclass.collapse.call (this);},//private:expand:function () {    Ext.ux.ComboBoxTree.superclass.expand.call (this); if (!this.tree) {this.inittree ();}    },//private:destroy:function () {if (This.tree && this.tree.rendered) This.tree.destroy ();    Ext.form.ComboBox.superclass.destroy.call (this); },//private inittree:function () {if (!this.list) {//must first initialize the list, which is especially important when setting the value of Combotree at the outset, and it took half a day to find the problem this.initlist    ();    }//Set This.preventcollapse=true to prevent combo shrinkage var enablecollapse = function () {this.preventcollapse = false;};    Set This.preventcollapse=false, allow combo to shrink var disablecollapse = function () {this.preventcollapse = true;}; This.tree = new Ext.tree.TreePanel ({renderTo:this.treeId, usearrows:false, autoscroll:true, height   : this.height,//fix IE Bug     Animate:true, Enabledd:false, Containerscroll:true, Border:false,dataurl:this.dataurl,loade r:this.loader,root:this.root,rootvisible:this.rootvisible,//bbar:[//', {text: ' Refresh ', Handler:this.reload, Iconcls: ' Icon-refresh ', scope:this}//Due to width issue//],listeners: {click:function (node) {disablecollapse ()        ;        if (node = = This.tree.root) {//Check root node if (!this.rootselectable) return;        } else if (!node.isleaf ()) {//Select Directory node if (!this.folderselectable) return;        } else{//Select leaf node if (!this.leafselectable) return;        }//Select the node first, then set value so that the Getnodevalue method takes the correct value in the Select Event Node.select ();        This.setvalue (node);        Enablecollapse ();        },//Expand and shrink nodes to prevent combo from shrinking beforeexpandnode:disablecollapse, Beforecollapsenode:disablecollapse, Beforeload:disablecollapse,//node loading and unwinding allows combo to shrink load:enablecollapse, expandnode:enablecollapse, scope:this}}); }}); Ext.reg (' Combotree ', Ext.ux.ComboBoxTree);/**************** Below is an example of use ***********************/new Ext.ux.ComboBoxTree ({fieldlabel: ' parent menu ', Hiddenname: ' ParentID ', value:this.modifyId? ": This.parentmenu.id,height:180,dataurl: ' sys/menu/getmenus.do ', Nodepathurl: ' sys/util/getentityidpath.do?c= Sys.entity.Menu ', root: {id: ' root ', Text: ' Roots menu ', expanded:true},rootvisible:true,rootselectable:true,rootvalue:null , Showfullpath:true,allowblank:false,});

1 floor CHUANMEIWC 2011-12-29 Cu.get Can this method be affixed together? 2 floor CHUANMEIWC 2011-12-29 CHUANMEIWC wrote Cu.get This method can be affixed together?
This problem can be ignored, there is a question to ask:
If Llowblank is set to true, what if you want to empty the value after selecting a node? 3 floor CHUANMEIWC 2011-12-30 CHUANMEIWC wrote Chuanmeiwc wrote Cu.get can this method be affixed together?
This problem can be ignored, there is a question to ask:
If Llowblank is set to true, what if you want to empty the value after selecting a node?
My solution is to add a tbar with a clear button when constructing the tree:

var combo = this;    This.tree = new Ext.tree.TreePanel ({    renderTo:this.treeId,    usearrows:false,        autoscroll:true,        Height:this.height,  //fix IE        animate:true,        enabledd:false,        containerscroll:true,        border: False,dataurl:this.dataurl,[color=red]tbar: [{text: ' Empty ', xtype: ' button ', iconcls: ' Reset ', Handler:function () { Combo.setvalue (null);}}],[/color]loader:this.loader,root:this.root,rootvisible:this.rootvisible

Is there a better solution?
There is another problem:
You can only use EXT.GETCMP (' Comboboxtree ') when you get the value of a node. Getnodevalue (). ID? I tried GetValue () and Getrawvalue () and cannot get the ID of the node. However, there is a problem with using this method to get the node ID, only after clicking on the ComboBox, the tree will be fetched asynchronously, so when the ComboBox is not clicked, ext.getcmp (' Comboboxtree '). The value of Getnodevalue () is null , so use ext.getcmp (' Comboboxtree '). Getnodevalue (). ID before you determine ext.getcmp (' Comboboxtree '). Getnodevalue () is null, otherwise an error will be asked.
Do you have any other way to solve the problem? 4 floor CHUANMEIWC 2011-12-30 CHUANMEIWC wrote
If Allowblank is set to true, what if you want to empty the value after selecting a node?

My solution is to add a tbar with a clear button when constructing the tree:

var combo = this;
This.tree = new Ext.tree.TreePanel ({
RenderTo:this.treeId,
Usearrows:false,
Autoscroll:true,
Height:this.height,//fix IE
Animate:true,
Enabledd:false,
Containerscroll:true,
Border:false,
DATAURL:THIS.DATAURL,
Tbar: [{text: ' Empty ', xtype: ' button ', iconcls: ' Reset ', Handler:function () {combo.setvalue (null);}],
Loader:this.loader,
Root:this.root,
RootVisible:this.rootVisible

Is there a better solution?
There is another problem:
You can only use EXT.GETCMP (' Comboboxtree ') when you get the value of a node. Getnodevalue (). ID? I tried GetValue () and Getrawvalue () and cannot get the ID of the node. However, there is a problem with using this method to get the node ID, only after clicking on the ComboBox, the tree will be fetched asynchronously, so when the ComboBox is not clicked, ext.getcmp (' Comboboxtree '). The value of Getnodevalue () is null , so use ext.getcmp (' Comboboxtree '). Getnodevalue (). ID before you determine ext.getcmp (' Comboboxtree '). Getnodevalue () is null, otherwise an error will be asked.
Do you have any other way to solve the problem? 5 floor Zxlaiye 2011-12-31 CHUANMEIWC wrote Chuanmeiwc wrote Cu.get can this method be affixed together?
This problem can be ignored, there is a question to ask:
If Llowblank is set to true, what if you want to empty the value after selecting a node?

This one.. Not yet, because it didn't take long to start using ExtJS, and many application details haven't had a chance to try. I think your method is also very good, add "empty" at the same time plus a "refresh" tree node control is good. 6/F Zxlaiye 2011-12-31 To CHUANMEIWC

After I posted the code and made some changes, but the changes did not update up in time, too many things to deal with Ah ...
What you said by GetValue () can not get the value of the problem, it is likely to be resolved later, without Getnodevalue (). ID so troublesome ... , in addition, asynchronously sends the requested method Cu.get (...). Done (...) Just a simple encapsulation of Ext.ajax.request, and the addition of global exception handling. This writing was learned from jquery, and I couldn't get rid of some of the jquery habits. 7 Floor CHUANMEIWC 2011-12-31 GetValue () I modified it? 8 floor Zxlaiye 2011-12-31 CHUANMEIWC wrote GetValue () How to modify it?
The GetValue () method simply returns This.value, the key being the setting of value in the Dosetvalue () method. Is it possible to get the correct value now? If it should be the previous Dosetvalue () method has a problem, specifically modified where I can't remember ... It's been too long. 9 Floor silence1214 2012-03-15   Dude, this value is not going to come out. 10 floor silence1214 2012-03-15   elder brother, In this example, when a page multiple operations will be appended to the last data here, such as before the tree is only 1, 2 in the Open is 1,2,1,2 only point refresh can this is how this is going to be, I could not find the modified Place 11 floor silence1214 2012-03-16    after a night of fighting last night, fighting in the morning. Find that root must be configured even if it is not necessary. Otherwise the problem a whole lot ...