EXT core API details-Ext. Tree. treepanel

Config definition {
Animate: Boolean,
Containerscroll: Boolean,
Ddappendonly: String,/* obviously this is an API error, treepanel. the only thing that JS uses is this. dropzone = new Ext. tree. treedropzone (this, this. dropconfig | {
Ddgroup: This. ddgroup | "treedd", appendonly: This. ddappendonly = true
})
The appendonly of ddconfig is affected only when dropconfig is not defined. The original API description is
True if the tree shocould only allow append drops can be dragged as an append only when the value is true */
Ddgroup: string,
Ddscroll: Boolean,
Dragconfig: object,
Dropconfig: object,
Enabledd: Boolean,
Enabledrag: Boolean,
Enabledrop: Boolean, // the above parameters should be learned in Ext. DD.
Hlcolor: String, // highlighted color
Hldrop: Boolean // is highlighted when the cursor is input?
Lines: Boolean // display the front wire of the tree control
Loader: Ext. Tree. treeloader // This is an important parameter. It is used to conveniently construct a tree menu and remotely call tree data.
Pathseparator: String // default separator/
Rootvisible: Boolean // root visibility? This is an interesting attribute, because a tree can have only one root. We need to use it when we need two or more "Roots ".
Selmodel: Boolean/* select mode. The default value is Ext. tree. defaultselectionmodel instance, which can also be Ext. tree. multiselectionmodel can be defined if you are interested. Of course, it is definitely not a Boolean value.
In addition, although both built-in selection methods support the getselectednodes and clearselections () methods, in treenode, it seems that only select/unselecte/isselected is used, if you write selectionmodel by yourself, you must support at least these three methods.
*/
Singleexpand: Boolean // only one of all sibling nodes can be expanded.

Attribute
Dragzone: Ext. Tree. treedragzone
Dropzone: Ext. Tree. treedropzone
Root: node // This attribute is the most important.

Method
Treepanel (Object config)
Structure

Collapseall (): void
Expandall (): void
Collapse all nodes

Expandpath (string path, [String ATTR], [function callback]): void
Find the node by path and expand the tree to this node

Getchecked ([string attribute], [treenode startnode]): Array
Returns an array containing all selected nodes or an array composed of attribute attributes of all selected nodes.

Getel (): Element
Returns the current treepanel container object.

Getloader (): Ext. Tree. treeloader
Current treeloader object

Getnodebyid (string ID): Node
Locate the Node object by the specified node ID

Getrootnode (): Node
Get the root node, which is the same as the root node.

Getselectionmodel (): treeselectionmodel
Select Mode

Gettreeel (): Ext. Element
Returns the elements under the current tree.

Selectpath (string path, [String ATTR], [function callback]): void
Select the specified node by path. In fact, expandpath is called to expand the Node object.

Setrootnode (node): Node
Set the root node

Event
Append: (TREE tree, node parent, node, number index)
Beforeappend: (TREE tree, node parent, node)
Beforechildrenrendered: (node)
Beforeclick: (node, ext. eventobject E)
Beforecollapsenode: (node, Boolean deep, Boolean anim)
Beforeexpandnode: (node, Boolean deep, Boolean anim)
Beforeinsert: (TREE tree, node parent, node, node refnode)
Beforeload: (node)
Beforemove: (TREE tree, node, node oldparent, node newparent, number index)
Beforenodedrop: (Object dropevent)
Beforeremove: (TREE tree, node parent, node)
Checkchange: (node this, Boolean checked)
Click: (node, ext. eventobject E)
Collapsenode: (node)
Contextmenu: (node, ext. eventobject E)
Dblclick: (node, ext. eventobject E)
Disabledchange: (node, Boolean disabled)
Dragdrop: (ext. Tree. treepanel this, ext. Tree. treenode node, dd, event E)
Enddrag: (ext. Tree. treepanel this, ext. Tree. treenode node, event E)
Expandnode: (node)
Insert: (TREE tree, node parent, node, node refnode)]
Load: (node)
Move: (TREE tree, node, node oldparent, node newparent, number
Nodedragover: (Object dragoverevent)
Nodedrop: (Object dropevent)
Remove: (TREE tree, node parent, node)
Startdrag: (ext. Tree. treepanel this, ext. Tree. treenode node, event E)
Textchange: (node, string text, string oldtext)

Ext. Tree. treenode
Tree control node class, inherited from Ext. Data. Node

Config {
Allowchildren: Boolean
Allowdrag: Boolean
Allowdrop: Boolean
Checked: Boolean // whether set to true or false, there will be a selection box in front, which is not set by default.
CLS: String
Disabled: Boolean
Draggable: Boolean
Expandable: Boolean
Expanded: Boolean
Href: String // hyperlink
Hreftarget: String
Icon: String // icon
Iconcls: String
Istarget: Boolean // is the drag target?
QTip: String // prompt
Qtipcfg: String //
Singleclickexpand: Boolean // click to expand
Text: String // text content
Uiprovider: function // default Ext. Tree. treenodeui. If you want to provide your own UI, You can inherit Ext. Tree. treenodeui.
}

Attribute
Disabled: Boolean
Text: String
Ui: treenodeui // This attribute is read-only. See uiprovider

Method
Treenode (Object/string attributes)
Structure

Collapse ([Boolean deep], [Boolean anim]): void
Collapse current node

Collapsechildnodes ([Boolean deep]): void
Subnode receiving

Disable (): void
Enable (): void
Disallow

Ensurevisible (): void
Make sure all parent nodes are expanded.

Expand ([Boolean deep], [Boolean anim], [function callback]): void
Expand to current node

Expand ([Boolean deep], [Boolean anim], [function callback]): void
Expand current node

Expandchildnodes ([Boolean deep]): void
Expand All Child Nodes

Getui (): treenodeui
Return UI Property

Isexpanded (): Boolean
Whether the current node is expanded

Isselected (): Boolean
Whether to select the current node

Select (): void
Select current node

Settext (string text): void
Set the text of the current node

Toggle (): void
Switch between the show or hide statuses

Unselect (): void
Deselect

Event
Beforechildrenrendered: (node this)
Beforeclick: (node this, ext. eventobject E)
Beforecollapse: (node this, Boolean deep, Boolean anim)
Beforeexpand: (node this, Boolean deep, Boolean anim)
Checkchange: (node this, Boolean checked)
Click: (node this, ext. eventobject E)
Collapse: (node this)
Contextmenu: (node this, ext. eventobject E)
Dblclick: (node this, ext. eventobject E)
Disabledchange: (node this, Boolean disabled)
Expand: (node this)
Textchange: (node this, string text, string oldtext)

Ext. Tree. asynctreenode
Inherited from Ext. Tree. treenode and supports asynchronous creation. Obviously, there is no difference between multiple loaders and treenode.

Config {
Loader: treeloader
}
Attribute
Loader: treeloader

Method
Asynctreenode (Object/string attributes)
Isloaded (): Boolean
Isloading (): Boolean
Reload (function callback): void

Event
Beforeload: (node this)
Load: (node this)

Ext. Tree. treenodeui
Designed for node output. This class should be inherited if you want to create your own UI
Method
Addclass (string/array classname): void
Add Style Class

Getanchor (): htmlelement
Returns the <A> element.

Geticonel (): htmlelement
Returns the element.

Gettextel (): htmlnode
Return text node
Hide (): void
Hide
Ischecked (): Boolean
Selected?

Removeclass (string/array classname): void
Remove Style
Show (): void
Display

Togglecheck (Boolean (optional): void
Switch selected status

Ext. Tree. roottreenodeui
The API indicates that it inherits from the object. In fact, the treenodeui inherits from Ext. Tree. treenodeui, which is also reasonable for output of the root node.

Ext. Tree. treeloader
Used to remotely read tree data to construct a subnode of treenode

Config {
Baseattrs: Object // construct the basic attributes of a subnode
Baseparams: input parameter of the object // request URL
Clearonload: Boolean // clear the child node before reloading
Dataurl: String // the URL of the remote request.
Preloadchildren: Boolean // recursively load the children attribute of all child nodes when the node is loaded for the first time
Uiproviders: Object // UI provider
URL: String // equivalent to dataurl
}

Method
Treeloader (Object config)
Structure
Createnode (): void
Create a node. The createnode: function (ATTR) defined in treeloader. js should be passed in as a custom node.

Load (ext. Tree. treenode node, function callback): void
Load a subnode to a node

Event
Beforeload: (object this, object node, object callback)
Load: (object this, object node, object response)
Loadexception: (object this, object node, object response)

Ext. Tree. treesorter
Sort
Config {
Casesensitive: Boolean // case sensitive. The default value is false.
Dir: String // whether it is in the forward or backward direction. Optional. ASC/DESC. Default ASC
Foldersort: Boolean // The leaf node is placed under the non-leaf node. The default value is true.
Leafattr: String // The attribute used for sorting in foldersort. The default attribute is leaf.
Property: String // The sorting attribute. The default value is text.
Sorttype: function // It can be converted and sorted by a specific sorttype.
}

Method
Treesorter (treepanel tree, object config)
Structure

Ext. Tree. treefilter
Filter
Clear (): void
Clear Current Filter

Filter (string/Regexp value, [String ATTR], [treenode startnode]): void

Filterby (function FN, [object scope]): void
Filters are used, but as described in the API, This is an experimental number and there are still many deficiencies, which are basically difficult to implement.

A small example by Convention

Ext. onready (function (){
// Create a tree
VaR tree = new Ext. Tree. treepanel ({
El: Ext. getbody (),
Autoscroll: True,
Animate: True,
Height: 200,
Enabledd: True,
Containerscroll: True
});

// Create a root
VaR root = new Ext. Tree. treenode ({
Text: 'ext js ',
Draggable: false,
ID: 'root'
});
// Set the root
Tree. setrootnode (Root );
Tree. Render ();

// Add a subnode
Root. appendchild (New Ext. Tree. treenode ({
Text: 'csdn ',
Href: 'http: // www.csdn.net ',
ID: 'node _ csdn'
}));

Root. appendchild (New Ext. Tree. treenode ({
Text: 'duduw ',
Href: 'http: // www.duduyun com ',
ID: 'duduw _ node'
}));

// Set attributes
Tree. Root. Attributes. Description = 'this is the root node ';
// Getnodebyid
Tree. getnodebyid ('duduw _ node'). Attributes. Description = 'This is a leaf node ';
// Select the first subnode
Tree. selectpath ('/root/node_csdn ');
// Event
Tree. On ('click', function (node, e ){
E. stopevent ();
If (node. Attributes. Description ){
Ext. MessageBox. Show ({Title: 'selected ',
MSG: String. Format ("Description: {0} <br/> href: {1}", node. Attributes. Description, node. Attributes. href)
});
}
});

});