Various Use Cases of Extjs tree

In this case, the formation of a tree in Extjs and the integration of various cases are recorded. The three main objects TreePanel, TreeNode, and AsyncTreeNode are described in detail. It is purely for personal fun and can be sorted out for later viewing.

JSP page:

<% @ Page contentType = "text/html; charset = UTF-8" %> <% @ include file = "/WEB-INF/views/include/taglib. jsp" %>Region Management
 
 <Script type = "text/javascript" src = "$ {ctxStatic}/ext-3.4.0/adapter/ext/ext-base.js"> </script> <script type = "text/javascript" src = "$ {ctxStatic}/ext-3.4.0/ext-all.js"> </script> <script type = "text/javascript" src = "$ {ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridSorter. js "> </script> <script type =" text/javascript "src =" $ {ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumnResizer. js "> </script> <script type =" text/javascript "src =" $ {ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridNodeUI. js "> </script> <script type =" text/javascript "src =" $ {ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridLoader. js "> </script> <script type =" text/javascript "src =" $ {ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumns. js "> </script> <script type =" text/javascript "src =" $ {ctxStatic}/ext-3.4.0/ux/treegrid/TreeGrid. js "> </script> <script type =" text/javascript "src =" $ {ctxStatic}/jquery/jquery-1.9.1.min.js "> </script> <script type =" text/ javascript "src =" $ {ctxStatic}/js/srcs/srcs-treegrid.js "> </script> <script type =" text/javascript "> // The project root directory address var ctxStatic = '$ {ctxStatic }'; </script>

Js page:

Ext. onReady (function () {// The initialization node prompts qtipExt. quickTips. init (); // defines a root node var root = new Ext. tree. treeNode ({id: 'root', text: 'root', checked: true, qtip: 'I am a root '}); // define a leaf or branch var leaf1 = new Ext. tree. treeNode ({id: "leaf1", text: 'I am leaf 1', checked: true, qtip:' I am leaf '}); var leaf2 = new Ext. tree. treeNode ({id: "leaf2", text: 'I am branch2', checked: true, qtip:' I am branch'}); var leaf3 = new Ext. tree. treeNode ({id: "le Af3 ", text: 'I am leaf 3', href: 'http: // www.baidu.com', checked: true, qtip: 'I am a leaf '}); var leaf4 = new Ext. tree. treeNode ({id: "leaf4", text: 'I am a branch' 4', checked: true, qtip:' I am a branch'}); var leaf5 = new Ext. tree. treeNode ({id: "leaf5", text: 'I am a leaf 5', checked: true, qtip:' I am a leaf '}); var leaf6 = new Ext. tree. treeNode ({id: "leaf6", text: 'I am leaf 4', checked: true, qtip:' I am leaf '}); root. appendChild (leaf1); root. appendCh Ild (leaf2); leaf2.appendChild (leaf3); leaf4); leaf4.appendChild (leaf5); leaf4.appendChild (leaf6); // define a menu // var contextMenu = new Ext. menu. menu ({items: [(//), ()]}); contextMenu. showAt (event. getXY (); // tree. on ('textmenu ', treeContextHandler); // var root = new Ext. tree. asyncTreeNode ({text: 'I am a root', id: 'root', // children: [{text: 'node1', leaf: true}, {text: 'node2', lea F: true },{// text: 'node3 ', leaf: true}]}); var loader = new Ext. tree. treeLoader (); // defines a tree var tree = new Ext. tree. treePanel ({renderTo: 'Container', // loader: loader, root: root, title: 'I am a deployment tree', // tree title collapsible: true, // whether the tree type has the autoHeight: true, // automatic height, default falseanimate: true, // enableDrag: true for the expanded animation, // whether the animation can be dragged (effect) enableDD: true, // you can drag the node or change the node hierarchy enableDrop: false, // only droplines: true ,/ /Whether the virtual lines between nodes show rootVisible: true, // whether the root node is displayed. The default value is trueuserArrows: true, // whether the small arrow is displayed // autoScroll: true, // whether the scroll bar is displayed // height: 150, width: 200}); // if the first parameter is true, all nodes are expanded. If the parameter is false, only the first level is expanded. If the second parameter is true, expand it slowly. If the parameter is false, the root process is not displayed. expand (false, true); // write the Click Event tree of the tree node. on ('click', function (node, event) {// Ext. msg. alert ("message prompt", "you clicked me! "); Ext. msg. show ({title: 'info', msg: node. text, animEl: node. ui. textNode}); // modify the style var ui = node for the node. ui; ui. hide (); (function () {ui. show ();}). defer (2000); // ui. addClass ("big"); // (// function () {// ui. removeClass ("big ");//}//). defer (5000); // Delete the selected node // tree. getSelectionModel (). getSelectedNode (). remove () ;}); // double-click event tree of the tree node. on ('dblclick', function (node, event) {Ext. msg. alert ("message prompt", "you clicked me tw Ice! ") ;}); // Edit the drag-and-drop Event tree of the tree node. on ('nodedrop', function (event) {Ext. msg. alert ('info', 'node' + event. dropNode. text + 'dropped to' + event.tar get. on text + ', the drop method is' + event. point); switch (event. point) {case 'append': Ext. msg. alert ('info', 'node' + event. dropNode. text + 'is changed to' + event.tar get. text + 'subnode'); break; case 'ababove ': Ext. msg. alert ('info', 'node' + event. dropNode. text + 'dropped to' + event.tar get. text + 'and' + event.tar get. previ OusSibling. text + '); break; case 'below': Ext. msg. alert ('info', 'node' + event. dropNode. text + 'dropped to' + event. dropNode. previussibling. text + 'and' + event.tar get. nextSibling. text + '); break;}) // tool for sorting Tree nodes // new Ext. tree. treeSorter (tree, {folderSort: true, dir: desc, property: 'text'}); // double-click event tree of the tree node. on ('pandnode', function (node, event) {// Ext. msg. alert ("message prompt", "expandnode! ") ;}); // Double-click event of the tree node // tree. on ('collapsenode', function (node, event) {// Ext. msg. alert ("message prompt", "collapsenode! ") ;}); Var root2 = new Ext. tree. treeNode ({id: 'root2', text: 'root 2', qtip: 'I am a root 2'}); var tree2 = new Ext. tree. treePanel ({renderTo: 'Container', root: root2, enableDrop: true, // enableDrag: true, title: 'I am a small grass', collapsible: true, width: 200}); root2.expand ();});

1. Ext. tree. TreePanel

Main configuration items:
Root: the root node of the tree.
RootVisible: whether to display the root node. The default value is true.
UseArrows: Specifies whether to use the Vista arrow in the tree. The default value is false.
Lines: whether to display tree lines. The default value is true.
Loader: The loader of the tree node. The default value is Ext. tree. TreeLoader.
SelModel: Specifies the tree selection mode. The default value is Ext. tree. DefaultSelectionModel.
PathSeparator: the delimiter of the Tree node path. The default value is "/".
SingleExpand: whether to expand only one node in the tree at a time. The default value is true.
RequestMethod: Request Method. Optional values include POST and GET.
ContainerScroll: whether to register the tree panel to the scroll manager ScrollManager.

Main Methods:
CollapseAll (): shrinks all Tree nodes
ExpandAll (): Expand All Tree nodes
GetRootNode (): Get the root node
GetNodeById (String id): Get the node with the specified id
Expand ([Boolean deep], [Boolean anim], [Function callback], [Object scope]) expand the panel body to make it visible.
ExpandPath (String path, [String attr], [Function callback]) expands the specified path in the current TreePanel.
GetChecked ([String attribute], [TreeNode startNode]) obtains the list of selected nodes or a specified attribute array of the selected nodes.
SelectPath (String path, [String attr], [Function callback]) Select the node of the given path from the tree
GetSelectionModel (): returns the selection model used by this TreePanel.

Ii. Ext. tree. TreeNode
Main configuration items:
Text: text Information on the node
Qtip: prompt information on the node
Icon: path corresponding to the node icon
IconCls: The style applied to the node Map
Checked: Select status of the current node
True: A check box in the selected status is displayed before the node.
False: displays an unselected check box before the node.
Do not specify this value: no check box is displayed
Href: Connection attribute of a node. The default value is #
HrefTarget: displays the target framework of node connection.
Editable: whether to allow editing. The default value is true.
Expanded: whether to expand a node. The default value is false.
Disabled: whether to disable a node. The default value is false.
SingleClickExpand: whether to expand a node by clicking
AllowChildren: whether to allow the current node to have subnodes. The default value is true.
Expandable: whether to display a plus or minus icon when no subnode is included. The default value is false.
UiProvider: UI class of the node. The default value is Ext. tree. TreeNodeUI.

Main attributes:
Text: text Information on the node
Disabled: whether the current node is disabled

Main Methods:
Collapse ([Boolean deep], [Boolean anim], [Function callback], [Object scope]): contract the current node
Deep: whether to cascade and contract all subnodes
CollapseChildNodes ([Boolean deep]): shrinks all subnodes.
Disable (): disable the current node
Enable (): enable the current node
EnsureVisible ([Function callback], [Object scope]): ensure that all parent nodes are expanded.
Expand ([Boolean deep], [Boolean anim], [Function callback], [Object scope]): expand the current node
ExpandChildNodes ([Boolean deep]): expands all subnodes.
IsExpanded (): whether to expand the current node
IsSelected (): whether the current node is selected
Select (): select the current node
SetText (String text): set the current text
Toggle (): switches the expansion and contraction statuses of the current node.
Unselect (): cancels the selection of the current node
GetUI (): Get the node UI object

Iii. Ext. tree. AsyncTreeNode
Main configuration items:
Loader: The Tree loader of the current node. By default, the tree loader configured in the tree is used.

Main Methods:
IsLoaded (): whether the current node has loaded data
Reload (Function callback, [Object scope]): reload node data and call the callback Function

Author: The Blue Drop Source: http://blog.csdn.net/cl05300629