-Ext.data.JsonP.tree({
- "guide": "<h1>Tree</h1>\n\n<hr />\n\n<p>Ext JS 4.0 introduces a solid foundation for one of our most versatile components - Tree. Tree and grid now both extend from the same base class. All of the benefits of grid - features, extensions, and plugins can now be used on trees. Things like columns, column resizing, dragging and dropping, renderers, sorting and filtering can now be expected to work similarly for both components. Additionally, we are planning on implementing new features to do things like paging and buffered rendering for very large trees.</p>\n\n<p>Lets start by creating a very simple Tree.</p>\n\n<pre><code>var tree = Ext.create('Ext.tree.Panel', {\n title: 'Simple Tree',\n root: {\n text: 'Root',\n expanded: true,\n children: [{\n text: 'Child 1',\n leaf: true\n }, {\n text: 'Child 2',\n leaf: true\n }]\n }\n});\n</code></pre>\n\n<p>We have defined a root node for our tree and told it to be expanded. We also defined two children inline, both of which we said are leaf nodes. Setting the <strong>leaf</strong> config to true indicates that the node won't be able to contain child nodes. The text property, like the name suggests, is used as the node's text label. The tree that this code produces looks like the following.</p>\n\n<p><img src=\"guides/tree/simple-tree.png\" alt=\"Simple Tree\" /></p>\n\n<p>The base class that Tree extends from, <a href=\"#/api/Ext.panel.Table\" rel=\"Ext.panel.Table\" class=\"docClass\">Ext.panel.Table</a>, is responsible for several things.</p>\n\n<ul>\n<li>Setting up and managing a (data)view</li>\n<li>Binding to a store</li>\n<li>Creating a header container</li>\n<li>Creating a selection model</li>\n</ul>\n\n\n<p>In the case of <a href=\"#/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Ext.tree.Panel</a>, the store has to be an instance of <a href=\"#/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">Ext.data.TreeStore</a>, the view will be an instance of <a href=\"#/api/Ext.tree.View\" rel=\"Ext.tree.View\" class=\"docClass\">Ext.tree.View</a> and the selection model by default is an instance of Ext.selection.TreeModel.</p>\n\n<p>In order to make setting up a tree as easy as possible, we make some assumptions internally. Sometimes you want your tree to behave or look differently. Fortunately, there are many configurations at our disposal to do so. We will start with visual configurations, and then dive into the data structures behind our tree.</p>\n\n<h2>Visually changing your tree</h2>\n\n<p>Let's try something simple. When you set the <strong>useArrows</strong> configuration to true, we hide the lines and use arrows as expand and collapse icons.</p>\n\n<p><img src=\"guides/tree/arrows.png\" alt=\"Arrows\" /></p>\n\n<p>Sometimes you don't want the root node to be visible. Setting the <strong>rootVisible</strong> property to false visually removes the root node. By doing this, your root node will automatically be expanded. The following image shows the same tree with <strong>rootVisible</strong> set to false. We have also set <strong>lines</strong> false.</p>\n\n<p><img src=\"guides/tree/root-lines.png\" alt=\"Root not visible and no lines\" /></p>\n\n<p>TODO: icon and iconCls</p>\n\n<h2>Multiple columns</h2>\n\n<p>Since our tree now extends a grid, adding more columns is very easy to do.</p>\n\n<pre><code>var tree = Ext.create('Ext.tree.Panel', {\n title: 'TreeGrid',\n fields: ['name', 'description'],\n columns: [{\n xtype: 'treecolumn',\n text: 'Name',\n dataIndex: 'name',\n width: 150,\n sortable: true\n }, {\n text: 'Description',\n dataIndex: 'description',\n flex: 1,\n sortable: true\n }],\n root: {\n name: 'Root',\n description: 'Root description',\n expanded: true,\n children: [{\n name: 'Child 1',\n description: 'Description 1',\n leaf: true\n }, {\n name: 'Child 2',\n description: 'Description 2',\n leaf: true\n }]\n }\n});\n</code></pre>\n\n<p>We have defined the columns configuration. The available configurations are exactly the same as those available for grid columns. You can use any type of column you would use in a grid. The only requirement when using multiple columns in a Tree is that you must supply at least one column with an xtype of <strong>treecolumn</strong>. This column decorates the column's renderer to visualize things like depth, lines and the expand and collapse icons. You usually want to create only one column of this type in your tree.</p>\n\n<p>We also specified the <strong>fields</strong> configuration, which will be passed on to the internally created store. We will get into this in more detail later in the guide, but for now just notice how the <strong>dataIndex</strong> configurations on the columns map to the fields we specified - name and description.</p>\n\n<p><img src=\"guides/tree/treegrid.png\" alt=\"Tree and a Grid\" /></p>\n\n<p>It is also worth noting that when you don't specify columns, the tree will automatically create one single <strong>treecolumn</strong> for you with a <strong>dataIndex</strong> set to 'text'. It also hides the headers on the tree. If you want to show this header when using only a single column, you can set the <strong>hideHeaders</strong> configuration to 'false'.</p>\n\n<h2>Events</h2>\n\n<p>Info about tree events here</p>\n\n<h2>Adding nodes to the tree</h2>\n\n<p>So far we haven't specified a store in any of our code. Since we haven't done so the tree will create a TreeStore for you and pass the root configuration to this store. This internally created TreeStore will get a memory proxy by default. This means that you can't load nodes from the server asynchronously. Instead you are expected to append all the nodes to your tree programmatically. We will look at how to do this in a little bit.</p>\n\n<p>Note that when you create a tree this way, you don't necessarily have to specify a root node right away. The following will achieve the exact same result except now we dynamically set the root node after the tree has been created.</p>\n\n<pre><code>var tree = Ext.create('Ext.tree.Panel');\ntree.setRootNode({\n text: 'Root',\n expanded: true,\n children: [{\n text: 'Child 1',\n leaf: true\n }, {\n text: 'Child 2',\n leaf: true\n }]\n});\n</code></pre>\n\n<p>Although this is useful for very small trees with only a few static nodes, usually your tree will contain many more nodes. So let's take a look at how we can programmatically add new nodes to the tree.</p>\n\n<pre><code>var root = tree.getRootNode();\n\nvar parent = root.appendChild({\n text: 'Parent 1'\n});\n\nparent.appendChild({\n text: 'Child 3',\n leaf: true\n});\n\nparent.expand();\n</code></pre>\n\n<p>When adding new nodes to the tree, you always need to get a reference to the parent you want to append the new node to. In this case we got a reference to the root node. You can call <em>appendChild</em> on any node in the tree that is not a leaf. It accepts a node instance or an object containing data that will be used to create a new node. The method always returns a fully instantiated node. In this example we programmatically call the <em>expand</em> method to expand our newly created parent.</p>\n\n<p><img src=\"guides/tree/append-children.png\" alt=\"Appending to the tree\" /></p>\n\n<p>We could have also just set the <strong>expanded</strong> configuration when defining the parent. Also useful is the ability to define children inline when creating the new parent nodes. The following code gives us the same result.</p>\n\n<pre><code>var parent = root.appendChild({\n text: 'Parent 1',\n expanded: true,\n children: [{\n text: 'Child 3',\n leaf: true\n }]\n});\n</code></pre>\n\n<p>Sometimes you will want to insert a node into a specific location in the tree instead of appending it. Besides the <em>appendChild</em> method, we also provide <em>insertBefore</em> and <em>insertChild</em> methods.</p>\n\n<pre><code>var child = parent.insertChild(0, {\n text: 'Child 2.5',\n leaf: true\n});\n\nparent.insertBefore({\n text: 'Child 2.75',\n leaf: true\n}, child.nextSibling);\n</code></pre>\n\n<p>As you can see the <em>insertChild</em> method expects an index at which the child will be inserted. The <em>insertBefore</em> method expects a reference node. Your new node will be inserted before that node.</p>\n\n<p><img src=\"guides/tree/insert-children.png\" alt=\"Inserting children into the tree\" /></p>\n\n<p>One other thing to note is the <strong>nextSibling</strong> property we used. There are several more properties on nodes that we can use to reference other nodes.</p>\n\n<ul>\n<li>nextSibling</li>\n<li>previousSibling</li>\n<li>parentNode</li>\n<li>lastChild</li>\n<li>firstChild</li>\n<li>childNodes</li>\n</ul>\n\n\n<h2>The Node Interface</h2>\n\n<p>So far we have come across several methods and properties on nodes. But what are nodes exactly? As we have mentioned before, the tree Panel is bound to a TreeStore. A store in <a href=\"#/api/Ext\" rel=\"Ext\" class=\"docClass\">Ext</a> JS manages a collection of model instances. We created a NodeInterface that can be used to decorate any model with fields, methods and properties required to have to model be used in a tree. When we refer to a node, we essentially are referring to a model instance that is decorated with the NodeInterface. The following screenshot shows you by logging a node in the developer tools.</p>\n\n<p><img src=\"guides/tree/nodeinterface.png\" alt=\"A model instance decorated with the NodeInterface\" /></p>\n\n<p>In order to see the full set of fields, methods and properties available on nodes, you can check out the API documentation for the NodeInterface class.</p>\n\n<ul>\n<li>list these fields and explain briefly what each one does</li>\n</ul>\n\n\n<h2>The tree's Store</h2>\n\n<ul>\n<li>introduction to specifying your own store</li>\n<li>define your own model with a proxy to asynchronously retrieve nodes from the server</li>\n<li>show the same model instances in tree and grid at the same time</li>\n</ul>\n\n"
-});
\ No newline at end of file
+Ext.data.JsonP.tree({"guide":"<h1>Trees</h1>\n\n<hr />\n\n<p>The <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree Panel</a> Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying heirarchical data in an application. Tree Panel extends from the same class as <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid Panel</a>, so all of the benefits of Grid Panels - features, extensions, and plugins can also be used on Tree Panels. Things like columns, column resizing, dragging and dropping, renderers, sorting and filtering can be expected to work similarly for both components.</p>\n\n<p>Let's start by creating a very simple Tree.</p>\n\n<pre class='inline-example '><code>Ext.create('Ext.tree.Panel', {\n renderTo: Ext.getBody(),\n title: 'Simple Tree',\n width: 150,\n height: 150,\n root: {\n text: 'Root',\n expanded: true,\n children: [\n {\n text: 'Child 1',\n leaf: true\n },\n {\n text: 'Child 2',\n leaf: true\n },\n {\n text: 'Child 3',\n expanded: true,\n children: [\n {\n text: 'Grandchild',\n leaf: true\n }\n ]\n }\n ]\n }\n});\n</code></pre>\n\n<p>This Tree Panel renders itself to the document body. We defined a root node that is expanded by default. The root node has three children, the first two of which are leaf nodes which means they cannot have any children. The third node is not a leaf node and has has one child leaf node. The <code>text</code> property is used as the node's text label. See <a href=\"guides/tree/examples/simple_tree/index.html\">Simple Tree</a> for a live demo.</p>\n\n<p>Internally a Tree Panel stores its data in a <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">TreeStore</a>. The above example uses the <a href=\"#!/api/Ext.tree.Panel-cfg-root\" rel=\"Ext.tree.Panel-cfg-root\" class=\"docClass\">root</a> config as a shortcut for configuring a store. If we were to configure the store separately, the code would look something like this:</p>\n\n<pre><code>var store = Ext.create('Ext.data.TreeStore', {\n root: {\n text: 'Root',\n expanded: true,\n children: [\n {\n text: 'Child 1',\n leaf: true\n },\n {\n text: 'Child 2',\n leaf: true\n },\n ...\n ]\n }\n});\n\nExt.create('Ext.tree.Panel', {\n title: 'Simple Tree',\n store: store,\n ...\n});\n</code></pre>\n\n<p>For more on <a href=\"#!/api/Ext.data.Store\" rel=\"Ext.data.Store\" class=\"docClass\">Store</a>s see the <a href=\"#/guide/data\">Data Guide</a>.</p>\n\n<h2>The Node Interface</h2>\n\n<p>In the above examples we set a couple of different properties on tree nodes. But what are nodes exactly? As mentioned before, the Tree Panel is bound to a <a href=\"#!/api/Ext.data.TreeStore\" rel=\"Ext.data.TreeStore\" class=\"docClass\">TreeStore</a>. A Store in Ext JS manages a collection of <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a> instances. Tree nodes are simply Model instances that are decorated with a <a href=\"#!/api/Ext.data.NodeInterface\" rel=\"Ext.data.NodeInterface\" class=\"docClass\">NodeInterface</a>. Decorating a Model with a NodeInterface gives the Model the fields, methods and properties that are required for it to be used in a tree. The following is a screenshot that shows the structure of a node in the developer tools.</p>\n\n<p><p><img src=\"guides/tree/nodeinterface.png\" alt=\"A model instance decorated with the NodeInterface\"></p></p>\n\n<p>In order to see the full set of fields, methods and properties available on nodes, see the API documentation for the <a href=\"#!/api/Ext.data.NodeInterface\" rel=\"Ext.data.NodeInterface\" class=\"docClass\">NodeInterface</a> class.</p>\n\n<h2>Visually changing your tree</h2>\n\n<p>Let's try something simple. When you set the <a href=\"#!/api/Ext.tree.Panel-cfg-useArrows\" rel=\"Ext.tree.Panel-cfg-useArrows\" class=\"docClass\">useArrows</a> configuration to true, the Tree Panel hides the lines and uses arrows as expand and collapse icons.</p>\n\n<p><p><img src=\"guides/tree/arrows.png\" alt=\"Arrows\"></p></p>\n\n<p>Setting the <a href=\"#!/api/Ext.tree.Panel-cfg-rootVisible\" rel=\"Ext.tree.Panel-cfg-rootVisible\" class=\"docClass\">rootVisible</a> property to false visually removes the root node. By doing this, the root node will automatically be expanded. The following image shows the same tree with <code>rootVisible</code> set to false and <a href=\"#!/api/Ext.tree.Panel-cfg-lines\" rel=\"Ext.tree.Panel-cfg-lines\" class=\"docClass\">lines</a> set to false.</p>\n\n<p><p><img src=\"guides/tree/root-lines.png\" alt=\"Root not visible and no lines\"></p></p>\n\n<h2>Multiple columns</h2>\n\n<p>Since <a href=\"#!/api/Ext.tree.Panel\" rel=\"Ext.tree.Panel\" class=\"docClass\">Tree Panel</a> extends from the same base class as <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid Panel</a> adding more columns is very easy to do.</p>\n\n<pre class='inline-example '><code>var tree = Ext.create('Ext.tree.Panel', {\n renderTo: Ext.getBody(),\n title: 'TreeGrid',\n width: 300,\n height: 150,\n fields: ['name', 'description'],\n columns: [{\n xtype: 'treecolumn',\n text: 'Name',\n dataIndex: 'name',\n width: 150,\n sortable: true\n }, {\n text: 'Description',\n dataIndex: 'description',\n flex: 1,\n sortable: true\n }],\n root: {\n name: 'Root',\n description: 'Root description',\n expanded: true,\n children: [{\n name: 'Child 1',\n description: 'Description 1',\n leaf: true\n }, {\n name: 'Child 2',\n description: 'Description 2',\n leaf: true\n }]\n }\n});\n</code></pre>\n\n<p>The <a href=\"#!/api/Ext.tree.Panel-cfg-columns\" rel=\"Ext.tree.Panel-cfg-columns\" class=\"docClass\">columns</a> configuration expects an array of <a href=\"#!/api/Ext.grid.column.Column\" rel=\"Ext.grid.column.Column\" class=\"docClass\">Ext.grid.column.Column</a> configurations just like a <a href=\"#!/api/Ext.grid.Panel\" rel=\"Ext.grid.Panel\" class=\"docClass\">Grid Panel</a> would have. The only difference is that a Tree Panel requires at least one column with an xtype of 'treecolumn'. This type of column has tree-specific visual effects like depth, lines and expand and collapse icons. A typical Tree Panel would have only one 'treecolumn'.</p>\n\n<p>The <code>fields</code> configuration is passed on to the Model that the internally created Store uses (See the <a href=\"#/guide/data\">Data Guide</a> for more information on <a href=\"#!/api/Ext.data.Model\" rel=\"Ext.data.Model\" class=\"docClass\">Model</a>s). Notice how the <a href=\"#!/api/Ext.grid.column.Column-cfg-dataIndex\" rel=\"Ext.grid.column.Column-cfg-dataIndex\" class=\"docClass\">dataIndex</a> configurations on the columns map to the fields we specified - name and description.</p>\n\n<p>It is also worth noting that when columns are not defined, the tree will automatically create one single <code>treecolumn</code> with a <code>dataIndex</code> set to 'text'. It also hides the headers on the tree. To show this header when using only a single column set the <code>hideHeaders</code> configuration to 'false'.</p>\n\n<h2>Adding nodes to the tree</h2>\n\n<p>The root node for the Tree Panel does not have to be specified in the initial configuration. We can always add it later:</p>\n\n<pre><code>var tree = Ext.create('Ext.tree.Panel');\ntree.setRootNode({\n text: 'Root',\n expanded: true,\n children: [{\n text: 'Child 1',\n leaf: true\n }, {\n text: 'Child 2',\n leaf: true\n }]\n});\n</code></pre>\n\n<p>Although this is useful for very small trees with only a few static nodes, most Tree Panels will contain many more nodes. So let's take a look at how we can programmatically add new nodes to the tree.</p>\n\n<pre><code>var root = tree.getRootNode();\n\nvar parent = root.appendChild({\n text: 'Parent 1'\n});\n\nparent.appendChild({\n text: 'Child 3',\n leaf: true\n});\n\nparent.expand();\n</code></pre>\n\n<p>Every node that is not a leaf node has an <a href=\"#!/api/Ext.data.NodeInterface-method-appendChild\" rel=\"Ext.data.NodeInterface-method-appendChild\" class=\"docClass\">appendChild</a> method which accepts a Node, or a config object for a Node as its first parameter, and returns the Node that was appended. The above example also calls the <a href=\"#!/api/Ext.data.NodeInterface-event-expand\" rel=\"Ext.data.NodeInterface-event-expand\" class=\"docClass\">expand</a> method to expand the newly created parent.</p>\n\n<p><p><img src=\"guides/tree/append-children.png\" alt=\"Appending to the tree\"></p></p>\n\n<p>Also useful is the ability to define children inline when creating the new parent nodes. The following code gives us the same result.</p>\n\n<pre><code>var parent = root.appendChild({\n text: 'Parent 1',\n expanded: true,\n children: [{\n text: 'Child 3',\n leaf: true\n }]\n});\n</code></pre>\n\n<p>Sometimes we want to insert a node into a specific location in the tree instead of appending it. Besides the <code>appendChild</code> method, <a href=\"#!/api/Ext.data.NodeInterface\" rel=\"Ext.data.NodeInterface\" class=\"docClass\">Ext.data.NodeInterface</a> also provides <a href=\"#!/api/Ext.data.NodeInterface-method-insertBefore\" rel=\"Ext.data.NodeInterface-method-insertBefore\" class=\"docClass\">insertBefore</a> and <a href=\"#!/api/Ext.data.NodeInterface-method-insertChild\" rel=\"Ext.data.NodeInterface-method-insertChild\" class=\"docClass\">insertChild</a> methods.</p>\n\n<pre><code>var child = parent.insertChild(0, {\n text: 'Child 2.5',\n leaf: true\n});\n\nparent.insertBefore({\n text: 'Child 2.75',\n leaf: true\n}, child.nextSibling);\n</code></pre>\n\n<p>The <code>insertChild</code> method expects an index at which the child will be inserted. The <code>insertBefore</code> method expects a reference node. The new node will be inserted before the reference node.</p>\n\n<p><p><img src=\"guides/tree/insert-children.png\" alt=\"Inserting children into the tree\"></p></p>\n\n<p>NodeInterface also provides several more properties on nodes that can be used to reference other nodes.</p>\n\n<ul>\n<li><a href=\"#!/api/Ext.data.NodeInterface-property-nextSibling\" rel=\"Ext.data.NodeInterface-property-nextSibling\" class=\"docClass\">nextSibling</a></li>\n<li><a href=\"#!/api/Ext.data.NodeInterface-property-previousSibling\" rel=\"Ext.data.NodeInterface-property-previousSibling\" class=\"docClass\">previousSibling</a></li>\n<li><a href=\"#!/api/Ext.data.NodeInterface-property-parentNode\" rel=\"Ext.data.NodeInterface-property-parentNode\" class=\"docClass\">parentNode</a></li>\n<li><a href=\"#!/api/Ext.data.NodeInterface-property-lastChild\" rel=\"Ext.data.NodeInterface-property-lastChild\" class=\"docClass\">lastChild</a></li>\n<li><a href=\"#!/api/Ext.data.NodeInterface-property-firstChild\" rel=\"Ext.data.NodeInterface-property-firstChild\" class=\"docClass\">firstChild</a></li>\n<li><a href=\"#!/api/Ext.data.NodeInterface-property-childNodes\" rel=\"Ext.data.NodeInterface-property-childNodes\" class=\"docClass\">childNodes</a></li>\n</ul>\n\n","title":"Trees"});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff