EXT Tree Learning Development process step additional code

 

The tree component in Yui. Ext can be used to implement tree layout on pages, including common tree menus. How can we generate a tree? There are four steps below;
1. Define a tree object:
VaR tree = new Ext. Tree. treepanel ('tree ',{
Animate: True,
Loader: New Ext. Tree. treeloader ({
Dataurl: 'Get-nodes. jsp ',
Baseparams: {Lib: 'uis '}
}),
Enabledd: True,
Containerscroll: True,
Dropconfig: {appendonly: true}
});
When defining a tree object, you must declare the Object ID and related parameters. As shown above, the tree Object ID is a tree. The related parameters include whether there is an animation effect (Animate: true), the data source of the Tree node (Loader: New Ext. tree. treeloader ({dataurl: 'get-nodes.txt ', baseparams: {Lib: 'uis'}), whether to drag and drop a node (enabledd: True), whether to include a scroll bar (containerscroll: True) and node drag-and-drop configuration (dropconfig: {appendonly: true.
2. Generate the root node of the tree:
VaR root = new Ext. Tree. asynctreenode ({
Text: 'yui-ext ',
Draggable: false,
ID: 'source'
});
Tree. setrootnode (Root );
First, generate a node. When the node is generated, you can define the text (Text attribute) displayed by the node, whether it can be dragged (draggable attribute, the root node must be defined as false), and the node ID, this ID allows us to use document on the page. getelementbyid to obtain the node and then call tree. setrootnode (Root) sets this node as the root node of the tree.
3. Other nodes that generate the tree:
Other nodes of the tree must be loaded from the data source. When the tree object is created, the path for obtaining the data source is defined-Loader: New Ext. tree. treeloader ({dataurl: 'Get-nodes. JSP ', baseparams: {Lib: 'uis'}), where the get-nodes.jsp is the path to generate the data source, the baseparams attribute defines the HTTP request parameters passed in when accessing the path (multiple parameters may exist ), the page will call XMLHttpRequest to access the path and parse the returned data into a node when generating the tree. In addition to using web services to dynamically generate data sources, you can also use static files as data sources. Yui. Ext only requires that the returned data format be similar to the following:
[{'Text': 'welcome.html ', 'id': 'welcome.html', 'cls': 'file', mypara: 'myvalue '},
{'Text': 'welcome2.html ', 'id': 'welcome2.html', 'leaf': True, 'cls': 'file', 'href ': 'welcome2.html'}]
The data is stored in an array. Each item in the array represents a node. Each node contains the following main attributes:
Text: defines the name displayed on the node;
ID: defines the page ID of the node to facilitate the document. getelementbyid method to obtain the node;
Leaf: true or false, which defines whether the node is a leaf node;
CLS: defines the class (display style) of the node );
Href: defines the page after clicking the node;
In addition, you can add custom attributes to a node. The method is the same as mypara: 'myvalue.
Yui. Ext automatically resolves the returned data to a node and correctly displays it on the page.
4. Add event processing for the tree:
A. Add events to a node when it is added
Tree. On ('append', function (tree, node ){
If (node. ID = 'foo '){
// Add your processing of the event here
}
});
B. Click events for a node
Tree. On ('click', function (node ){
If (node. ID = 'foo '){
// Add your processing of the click event here
}
});
C. events for a region (SET)
Tree. getselectionmodel (). On ('selectionchang', function (SM, node ){
If (node & node. ID = 'foo '){
// Add your processing of the event here
}
});
After the above four steps, we can generate a complete tree object.

Appendix:
JS source code, which generates two trees, one is the Yui tree and the other is the Yui. EXT tree, where a static file is used as the data source, and a dynamically generated Data source:
/*
* Ext JS library 1.0 Beta 1
* Copyright (c) 2006-2007, ext JS, LLC.
* Licensing@extjs.com
*
* Http://www.extjs.com/license
*/

VaR treetest = function (){
// Shorthand
VaR tree = ext. tree;

Return {
Init: function (){
// Yui-ext tree
VaR tree = new tree. treepanel ('tree ',{
Animate: True,
Loader: new tree. treeloader ({dataurl: 'get-nodes.txt '}),
Enabledd: True,
Containerscroll: True,
Dropconfig: {appendonly: true}
});

// Add a tree sorter in folder Mode
New tree. treesorter (tree, {foldersort: true });

// Set the root node
VaR root = new tree. asynctreenode ({
Text: 'yui-ext ',
Draggable: false, // disable root node dragging
ID: 'source'
});
Tree. setrootnode (Root );

// Render the tree
Tree. Render ();

Root. Expand (false,/* No anim */false );

//-------------------------------------------------------------

// Yui tree
VaR tree2 = new tree. treepanel ('tree2 ',{
Animate: True,
// Rootvisible: false,
Loader: New Ext. Tree. treeloader ({
Dataurl: 'Get-nodes. jsp ',
Baseparams: {Lib: 'uis '} // custom HTTP Params
}),
Containerscroll: True,
Enabledd: True,
Dropconfig: {appendonly: true}
});

// Add a tree sorter in folder Mode
New tree. treesorter (tree2, {foldersort: true });

// Add the root node
VaR root2 = new tree. asynctreenode ({
Text: 'yahoo! Ui source ',
Draggable: false,
ID: 'uis'
});
Tree2.setrootnode (root2 );
Tree2.render ();

Root2.expand (false,/* No anim */false );
}
};
}();

Ext. eventmanager. ondocumentready (treetest. init, treetest, true );

Corresponding HTML code:
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1">
<Title> drag and drop between 2 treepanels </title>
<LINK rel = "stylesheet" type = "text/CSS" href = ".../../resources/CSS/ext-all.css"/>

<! -- Libs --> <SCRIPT type = "text/JavaScript" src = ".. /.. /yui-utilities.js "> </SCRIPT> <SCRIPT type =" text/JavaScript "src = ".. /.. /ext-yui-adapter.js "> </SCRIPT> <! -- Endlibs -->
<SCRIPT type = "text/JavaScript" src = ".../ext-all.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "two-trees.js"> </SCRIPT>

<! -- Common styles for the examples -->
<LINK rel = "stylesheet" type = "text/CSS" href = ".../examples.css"/>
<Style type = "text/CSS">
# Tree, # tree2 {
Float: left;
Margin: 20px;
Border: 1px solid # c3daf9;
Width: 250px;
Height: 300px;
Overflow: auto;
}
. Folder. X-tree-node-Icon {
Background: transparent URL (.../../resources/images/default/tree/folder.gif );
}
. X-tree-node-expanded. X-tree-node-Icon {
Background: transparent URL (../resources/images/default/tree/folder-open.gif );
}
</Style>
</Head>
<Body>
<SCRIPT type = "text/JavaScript" src = ".../examples. js"> </SCRIPT> <! -- Examples -->
<H1> drag and drop betweens two treepanels <P> the treepanels have a treesorter applied in "foldersort" mode. </P>
<P> both treepanels are in "appendonly" Drop mode since they are sorted. </P>
<P> drag along the edge of the tree to trigger auto scrolling while refreshing a drag and drop. </P>
<P> the data for this tree is asynchronously loaded with a JSON treeloader. </P>
<P> the JS is not minified so it is readable. See <a href = "two-trees.js"> two-trees.js </a>. </P>

<Div id = "Tree"> </div>
<Div id = "tree2"> </div>

</Body>
</Html>

 

Http://www.blogjava.net/javaa/archive/2007/04/12/110070.aspxreprinted