![\"Simple](\"guides/tree/simple-tree.png\")
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.
\n\nLets start by creating a very simple Tree.
\n\nvar 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});\nWe 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 leaf 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.
\n\n
The base class that Tree extends from, Ext.panel.Table, is responsible for several things.
\n\nIn the case of Ext.tree.Panel, the store has to be an instance of Ext.data.TreeStore, the view will be an instance of Ext.tree.View and the selection model by default is an instance of Ext.selection.TreeModel.
\n\nIn 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.
\n\nLet's try something simple. When you set the useArrows configuration to true, we hide the lines and use arrows as expand and collapse icons.
\n\n![\"Arrows\"](\"guides/tree/arrows.png\")
Sometimes you don't want the root node to be visible. Setting the rootVisible 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 rootVisible set to false. We have also set lines false.
\n\n![\"Root](\"guides/tree/root-lines.png\")
TODO: icon and iconCls
\n\nSince our tree now extends a grid, adding more columns is very easy to do.
\n\nvar 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});\nWe 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 treecolumn. 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.
\n\nWe also specified the fields 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 dataIndex configurations on the columns map to the fields we specified - name and description.
\n\n![\"Tree](\"guides/tree/treegrid.png\")
It is also worth noting that when you don't specify columns, the tree will automatically create one single treecolumn for you with a dataIndex 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 hideHeaders configuration to 'false'.
\n\nInfo about tree events here
\n\nSo 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.
\n\nNote 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.
\n\nvar 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});\nAlthough 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.
\n\nvar 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();\nWhen 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 appendChild 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 expand method to expand our newly created parent.
\n\n![\"Appending](\"guides/tree/append-children.png\")
We could have also just set the expanded 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.
\n\nvar parent = root.appendChild({\n text: 'Parent 1',\n expanded: true,\n children: [{\n text: 'Child 3',\n leaf: true\n }]\n});\nSometimes you will want to insert a node into a specific location in the tree instead of appending it. Besides the appendChild method, we also provide insertBefore and insertChild methods.
\n\nvar 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);\nAs you can see the insertChild method expects an index at which the child will be inserted. The insertBefore method expects a reference node. Your new node will be inserted before that node.
\n\n![\"Inserting](\"guides/tree/insert-children.png\")
One other thing to note is the nextSibling property we used. There are several more properties on nodes that we can use to reference other nodes.
\n\nSo 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 Ext 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.
\n\n![\"A](\"guides/tree/nodeinterface.png\")
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.
\n\nThe Tree Panel 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 Grid Panel, 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.
\n\nLet's start by creating a very simple Tree.
\n\nExt.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});\nThis 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 text property is used as the node's text label. See Simple Tree for a live demo.
Internally a Tree Panel stores its data in a TreeStore. The above example uses the root config as a shortcut for configuring a store. If we were to configure the store separately, the code would look something like this:
\n\nvar 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});\nFor more on Stores see the Data Guide.
\n\nIn 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 TreeStore. A Store in Ext JS manages a collection of Model instances. Tree nodes are simply Model instances that are decorated with a NodeInterface. 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.
\n\n
In order to see the full set of fields, methods and properties available on nodes, see the API documentation for the NodeInterface class.
\n\nLet's try something simple. When you set the useArrows configuration to true, the Tree Panel hides the lines and uses arrows as expand and collapse icons.
\n\n
Setting the rootVisible 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 rootVisible set to false and lines set to false.
Since Tree Panel extends from the same base class as Grid Panel adding more columns is very easy to do.
\n\nvar 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});\nThe columns configuration expects an array of Ext.grid.column.Column configurations just like a Grid Panel 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'.
\n\nThe fields configuration is passed on to the Model that the internally created Store uses (See the Data Guide for more information on Models). Notice how the dataIndex configurations on the columns map to the fields we specified - name and description.
It is also worth noting that when columns are not defined, the tree will automatically create one single treecolumn with a dataIndex set to 'text'. It also hides the headers on the tree. To show this header when using only a single column set the hideHeaders configuration to 'false'.
The root node for the Tree Panel does not have to be specified in the initial configuration. We can always add it later:
\n\nvar 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});\nAlthough 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.
\n\nvar 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();\nEvery node that is not a leaf node has an appendChild 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 expand method to expand the newly created parent.
\n\n
Also useful is the ability to define children inline when creating the new parent nodes. The following code gives us the same result.
\n\nvar parent = root.appendChild({\n text: 'Parent 1',\n expanded: true,\n children: [{\n text: 'Child 3',\n leaf: true\n }]\n});\nSometimes we want to insert a node into a specific location in the tree instead of appending it. Besides the appendChild method, Ext.data.NodeInterface also provides insertBefore and insertChild methods.
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);\nThe insertChild method expects an index at which the child will be inserted. The insertBefore method expects a reference node. The new node will be inserted before the reference node.
NodeInterface also provides several more properties on nodes that can be used to reference other nodes.
\n\n\n\n","title":"Trees"}); \ No newline at end of file