Extjs 4-tree

Tree panelIt is one of the most versatile components in extjs and is suitable for displaying hierarchical data.Tree panelAndGrid panelInherits from the same base class, so allGrid panelThe benefits of features, extensions, and plug-ins that can be obtained are as follows:Tree panelIt can also be obtained. The features of column, column Width Adjustment, drag and drop, Renderer, sorting, and filtering are similar in the two components.

Let's start to create a simple tree component.

Create a store first:

VaR treestore = ext. Create ('Ext. Data. treestore', {Proxy: {type:'Ajax', URL:'Grade.htm? Getallgrades'}, Root: {text:'Name', ID:'Id', Expanded:True, Leaf:True}, Foldersort:True, Sorters: [{property:'Id', Direction:'Asc'}]});
 

 
Table 1 main configuration items of Ext. Data. treestore
 

configuration item	parameter type	description
clearonload	Boolean	set whether the data loaded before is clear when loading node data. The default value is true
defaultrootid	string	set the Default Root Node ID, which is root by default
defaultrootproperty	string	set the Default Root attribute
nodeparam	string	parameter name when a node is asynchronously loaded. The default value is node

Create treepane:

 VaR Gradetree = ext. Create ( 'Ext. Tree. Panel' , {Store: treestore, ID: 'Gradetree' , Bodystyle:'Background-color: # deebf7' , Height: 300, width: 250, usearrows: True , Root: {text: 'My class' , ID: '0' }, Rootvisible: True , Tbar: New Ext. toolbar ({style: 'Border-top: 0px; border-left: 0px' , Items: [{iconcls: 'Icon-expand-all' , Text: 'Expand' , Tooltip: 'Show all' , Handler: Function () {Gradetree. getrootnode (). Expand ( True ) ;}, Scope: This }, '-' , {Iconcls: 'Icon-collapse-all' , Text: 'Folder' , Tooltip: 'Hide all' , Handler: Function () {Gradetree. getrootnode (). Collapse ( True ) ;}, Scope: This }]});

Tree node click event:

 gradetree. on ( 'itemclick' ,  function  (view, record, item, index, e, opts) { // obtain the node currently clicked   var  treenode = record. raw;  var  id = treenode. ID;  var  text = treenode. text; studentstore. loadpage (1, { Params :{ gradeid: Id }}) ;}); 

 

Table 2 main configuration items of Ext. Tree. Panel

Configuration item	Parameter type	Description
Animate	Boolean	Sets whether to enable animation when expanding or contracting nodes. The default value is Ext. enablefx.
Displayfield	String	Set the field name of the node title. The default value is text.
Hidehearers	Boolean	If it is set to true, the title is hidden.
Lines	Boolean	Sets whether to display the dotted line before the node. The default value is true.
Root	Object	A simple tree structure can be created through pre-read data without specifying store for tree. Panel.
Rootvisible	Boolean	Sets whether the root node is visible. The default value is true.
Singleexpland	Boolean	Sets whether to expand a single node. The default value is false.
Usearrows	Boolean	If this parameter is set to true, the Vista arrow is used. The default value is false.

Table 3 main Ext. Tree. Panel Methods

Method Name	Description
Collpaseall ([function callback], [object scope]): void	Contract all expanded nodes Parameter description: callback function after contraction Scope: the scope of callback function execution.
Expandall ([function callback], [object scope]): void	Expand All Expanded nodes Parameter description: callback function after expansion Scope: the scope of callback function execution.
Expandpath (string path, [String Field], [String separator], [function callback], [object scope]): void	Expand the tree node to the specified path Parameter description: Path: path string Filed (optional): field name of the retrieved data. The default value is ID. Separator: Specifies the path style character. The default value is '/' Callback: the callback function after the node is expanded. The input function parameters include: Success: indicates whether the expansion is successful. Lastnode: the last expanded node. Scope: the scope of callback function execution.
Getchecked (): Array	Returns an array of selected nodes.
Selectpath (string path, [String Field], [String separator], [function callback], [object scope]): void	Select a tree node in a specific path Parameter description: Same as expandpath.

 

CodeExample 1: Multi-column tree

Ext. onready ( Function (){ VaR Tree = ext. Create ( 'Ext. Tree. Panel' , {Title: 'Treegrid (Multi-column tree example )' , Renderto: Ext. getbody (), width: 200, height: 120, fields :[ 'Name' , 'Description' ], Columns: [{xtype: 'Trecolumn' , // Tree table column Text: 'Name' , Dataindex: 'Name' , Width: 100, sortable: True }, {Text: 'Description' , Dataindex: 'Description' , Flex: 1, sortable: True }], Root: {Name: 'Root' , Description: 'Tree root description' , Expanded: True , Children: [{Name:'Node 1' , Description: 'Node 1 description' , Leaf: True }, {Name: 'Node 2' , Description: 'Node 2 description' , Leaf: True }]});

Code Example 2: tree with check boxes

Ext. onready ( Function (){ VaR Tree = ext. Create ( 'Ext. Tree. Panel' , {Title: 'Check box example' , Width: 150, height: 100, renderto: Ext. getbody (), root: {text: 'Root' , // Node name Expanded: True , // Expand the root node by default Children: [{text: 'Node 1' , // Node name                      Checked : True , // Selected by default Leaf: True  // True indicates a leaf node. }, {Text: 'Node 2' ,// Node name                      Checked : False , // Not selected by default Leaf: True  // True indicates a leaf node. }]});

Code Example 3: Drag between tree panels

Ext. onready ( Function (){ // Create tree Panel 1 Ext. Create ( 'Ext. Tree. Panel' , {Title: 'Tree yi' , Width: 200, height: 150, renderto: 'Tree1' , Root: {text: 'Root' , // Node name Expanded: True , // Expand the root node by default Children: [{text: 'Node 1' , // Node name Leaf: True  // True indicates a leaf node. }, {Text: 'Node 2' , // Node name Leaf: True // True indicates a leaf node. }]}, Viewconfig: {plugins: {allowcontainerdrop: True , Ptype: 'Treeviewdragdrop' , Nodehighlightonrepair: True }}}); // Create tree panel 2 Ext. Create ( 'Ext. Tree. Panel' , {Title: 'Tree 2' , Width: 200, height: 150, renderto: 'Tree2' , Root: {text: 'Root' , Expanded:True }, Viewconfig: {plugins: {allowcontainerdrop: True , Ptype: 'Treeviewdragdrop' }}});});