-<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.tree.TreePanel-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.tree.TreePanel-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.tree.TreePanel-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.tree.TreePanel-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.tree.TreePanel"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Panel.html" ext:member="" ext:cls="Ext.Panel">Panel</a> <img src="resources/elbow-end.gif">TreePanel</pre></div><h1>Class <a href="source/TreePanel.html#cls-Ext.tree.TreePanel">Ext.tree.TreePanel</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.tree</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">TreePanel.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/TreePanel.html#cls-Ext.tree.TreePanel">TreePanel</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Panel.html" ext:cls="Ext.Panel" ext:member="">Panel</a></td></tr><tr><td class="label">xtype:</td><td class="hd-info">treepanel</td></tr></table><div class="description"><p>The TreePanel provides tree-structured UI representation of tree-structured data.</p>\r
-<p><a href="output/Ext.tree.TreeNode.html" ext:cls="Ext.tree.TreeNode">TreeNode</a>s added to the TreePanel may each contain metadata\r
-used by your application in their <a href="output/Ext.tree.TreeNode.html#Ext.tree.TreeNode-attributes" ext:member="attributes" ext:cls="Ext.tree.TreeNode">attributes</a> property.</p>\r
-<p><b>A TreePanel must have a <a href="output/Ext.tree.TreePanel.html#Ext.tree.TreePanel-root" ext:member="root" ext:cls="Ext.tree.TreePanel">root</a> node before it is rendered.</b> This may either be\r
-specified using the <a href="output/Ext.tree.TreePanel.html#Ext.tree.TreePanel-root" ext:member="root" ext:cls="Ext.tree.TreePanel">root</a> config option, or using the <a href="output/Ext.tree.TreePanel.html#Ext.tree.TreePanel-setRootNode" ext:member="setRootNode" ext:cls="Ext.tree.TreePanel">setRootNode</a> method.\r
-<p>An example of tree rendered to an existing div:</p><pre><code><b>var</b> tree = <b>new</b> Ext.tree.TreePanel({\r
- renderTo: <em>'tree-div'</em>,\r
- useArrows: true,\r
- autoScroll: true,\r
- animate: true,\r
- enableDD: true,\r
- containerScroll: true,\r
- border: false,\r
- <i>// auto create TreeLoader\r</i>
- dataUrl: <em>'get-nodes.php'</em>,\r
-\r
- root: {\r
- nodeType: <em>'async'</em>,\r
- text: <em>'Ext JS'</em>,\r
- draggable: false,\r
- id: <em>'source'</em>\r
- }\r
-});\r
-\r
-tree.getRootNode().expand();</code></pre>\r
-<p>The example above would work with a data packet similar to this:</p><pre><code>[{\r
- <em>"text"</em>: <em>"adapter"</em>,\r
- <em>"id"</em>: <em>"source\/adapter"</em>,\r
- <em>"cls"</em>: <em>"folder"</em>\r
-}, {\r
- <em>"text"</em>: <em>"dd"</em>,\r
- <em>"id"</em>: <em>"source\/dd"</em>,\r
- <em>"cls"</em>: <em>"folder"</em>\r
-}, {\r
- <em>"text"</em>: <em>"debug.js"</em>,\r
- <em>"id"</em>: <em>"source\/debug.js"</em>,\r
- <em>"leaf"</em>: true,\r
- <em>"cls"</em>: <em>"file"</em>\r
-}]</code></pre>\r
-<p>An example of tree within a Viewport:</p><pre><code><b>new</b> Ext.Viewport({\r
- layout: <em>'border'</em>,\r
- items: [{\r
- region: <em>'west'</em>,\r
- collapsible: true,\r
- title: <em>'Navigation'</em>,\r
- xtype: <em>'treepanel'</em>,\r
- width: 200,\r
- autoScroll: true,\r
- split: true,\r
- loader: <b>new</b> Ext.tree.TreeLoader(),\r
- root: <b>new</b> Ext.tree.AsyncTreeNode({\r
- expanded: true,\r
- children: [{\r
- text: <em>'Menu Option 1'</em>,\r
- leaf: true\r
- }, {\r
- text: <em>'Menu Option 2'</em>,\r
- leaf: true\r
- }, {\r
- text: <em>'Menu Option 3'</em>,\r
- leaf: true\r
- }]\r
- }),\r
- rootVisible: false,\r
- listeners: {\r
- click: <b>function</b>(n) {\r
- Ext.Msg.alert(<em>'Navigation Tree Click'</em>, <em>'You clicked: <em>"'</em> + n.attributes.text + <em>'"</em>'</em>);\r
- }\r
- }\r
- }, {\r
- region: <em>'center'</em>,\r
- xtype: <em>'tabpanel'</em>,\r
- <i>// remaining code not shown ...\r</i>
- }]\r
-});</code></pre></div><div class="hr"></div><a id="Ext.tree.TreePanel-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-anchor"></a><b><a href="source/Component.html#cfg-Ext.Component-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.tree.TreePanel-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.tree.TreePanel-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.tree.TreePanel-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.tree.TreePanel-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.tree.TreePanel"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.Panel.html" ext:member="" ext:cls="Ext.Panel">Panel</a>
+ <img src="resources/elbow-end.gif">TreePanel</pre></div><h1>Class <a href="source/TreePanel.html#cls-Ext.tree.TreePanel">Ext.tree.TreePanel</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.tree</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/TreePanel.html#cls-Ext.tree.TreePanel">TreePanel.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/TreePanel.html#cls-Ext.tree.TreePanel">TreePanel</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Panel.html" ext:cls="Ext.Panel" ext:member="">Panel</a></td></tr></table><div class="description"><p>The TreePanel provides tree-structured UI representation of tree-structured data.</p>
+<p><a href="output/Ext.tree.TreeNode.html" ext:cls="Ext.tree.TreeNode">TreeNode</a>s added to the TreePanel may each contain metadata
+used by your application in their <a href="output/Ext.tree.TreeNode.html#Ext.tree.TreeNode-attributes" ext:member="attributes" ext:cls="Ext.tree.TreeNode">attributes</a> property.</p>
+<p><b>A TreePanel must have a <a href="output/Ext.tree.TreePanel.html#Ext.tree.TreePanel-root" ext:member="root" ext:cls="Ext.tree.TreePanel">root</a> node before it is rendered.</b> This may either be
+specified using the <a href="output/Ext.tree.TreePanel.html#Ext.tree.TreePanel-root" ext:member="root" ext:cls="Ext.tree.TreePanel">root</a> config option, or using the <a href="output/Ext.tree.TreePanel.html#Ext.tree.TreePanel-setRootNode" ext:member="setRootNode" ext:cls="Ext.tree.TreePanel">setRootNode</a> method.
+<p>An example of tree rendered to an existing div:</p><pre><code><b>var</b> tree = <b>new</b> Ext.tree.TreePanel({
+ renderTo: <em>'tree-div'</em>,
+ useArrows: true,
+ autoScroll: true,
+ animate: true,
+ enableDD: true,
+ containerScroll: true,
+ border: false,
+ <i>// auto create TreeLoader</i>
+ dataUrl: <em>'get-nodes.php'</em>,
+
+ root: {
+ nodeType: <em>'async'</em>,
+ text: <em>'Ext JS'</em>,
+ draggable: false,
+ id: <em>'source'</em>
+ }
+});
+
+tree.getRootNode().expand();</code></pre>
+<p>The example above would work with a data packet similar to this:</p><pre><code>[{
+ <em>"text"</em>: <em>"adapter"</em>,
+ <em>"id"</em>: <em>"source\/adapter"</em>,
+ <em>"cls"</em>: <em>"folder"</em>
+}, {
+ <em>"text"</em>: <em>"dd"</em>,
+ <em>"id"</em>: <em>"source\/dd"</em>,
+ <em>"cls"</em>: <em>"folder"</em>
+}, {
+ <em>"text"</em>: <em>"debug.js"</em>,
+ <em>"id"</em>: <em>"source\/debug.js"</em>,
+ <em>"leaf"</em>: true,
+ <em>"cls"</em>: <em>"file"</em>
+}]</code></pre>
+<p>An example of tree within a Viewport:</p><pre><code><b>new</b> Ext.Viewport({
+ layout: <em>'border'</em>,
+ items: [{
+ region: <em>'west'</em>,
+ collapsible: true,
+ title: <em>'Navigation'</em>,
+ xtype: <em>'treepanel'</em>,
+ width: 200,
+ autoScroll: true,
+ split: true,
+ loader: <b>new</b> Ext.tree.TreeLoader(),
+ root: <b>new</b> Ext.tree.AsyncTreeNode({
+ expanded: true,
+ children: [{
+ text: <em>'Menu Option 1'</em>,
+ leaf: true
+ }, {
+ text: <em>'Menu Option 2'</em>,
+ leaf: true
+ }, {
+ text: <em>'Menu Option 3'</em>,
+ leaf: true
+ }]
+ }),
+ rootVisible: false,
+ listeners: {
+ click: <b>function</b>(n) {
+ Ext.Msg.alert(<em>'Navigation Tree Click'</em>, <em>'You clicked: <em>"'</em> + n.attributes.text + <em>'"</em>'</em>);
+ }
+ }
+ }, {
+ region: <em>'center'</em>,
+ xtype: <em>'tabpanel'</em>,
+ <i>// remaining code not shown ...</i>
+ }]
+});</code></pre></div><div class="hr"></div><a id="Ext.tree.TreePanel-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-anchor"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered
git.ithinksw.org / extjs.git / blobdiff