Extjs 4 Official Guide Translation: tree components

Original: http://docs.sencha.com/ext-js/4-0! /GUIDE/tree

Translation: Frank/sp42 reprinted. Please keep the information on this page.

Tree trees

The tree panel component is one of the most colorful components in extjs and is suitable for displaying hierarchical data. Both the tree panel and grid come from the same base class. The reason for this design is that all extensions or plug-ins can reuse consistent functions. For example, multiple columns, dimension control, drag-and-drop, rendering, and filtering are all common features.

The
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 asgrid
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.

Let's start to create a very simple tree.

Let's start by creating a very simple tree.

Ext.create('Ext.tree.Panel', {    renderTo: Ext.getBody(),    title: 'Simple Tree',    width: 150,    height: 150,    root: {        text: 'Root',        expanded: true,        children: [            {                text: 'Child 1',                leaf: true            },            {                text: 'Child 2',                leaf: true            },            {                text: 'Child 3',                expanded: true,                children: [                    {                        text: 'Grandchild',                        leaf: true                    }                ]            }        ]    }});

The tree panel is rendered to the document. Body element. The defined root node is automatically expanded. This is the default situation. The root node has three subnodes, the first two of which are leaf nodes, indicating that they do not have any child nodes (children ). The third node is a leaf node that already has a child leaf node (one child leaf node ). The text attribute is the text displayed by the node. You can open an example to see how it works.

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 one child leaf node.textProperty is used as the node's text label. seesimple tree for a live demo.

The data on the tree panel is stored in treestore. In the above example, we cannot see that the store configuration does not exist, but uses the internal default. If we want to configure another store, it should look like this:

Internally a tree panel stores its data in
Treestore. The above example uses
Root config as a shortcut cut for processing ing a store. If we were to configure the store separately, the Code wowould look something like this:

var store = Ext.create('Ext.data.TreeStore', {    root: {        text: 'Root',        expanded: true,        children: [            {                text: 'Child 1',                leaf: true            },            {                text: 'Child 2',                leaf: true            },            ...        ]    }});Ext.create('Ext.tree.Panel', {    title: 'Simple Tree',    store: store,    ...});

See Alibaba uide for more store content.

For more on
Stores see the data guide.

Node interface the node interface

From the above example, we can see many attributes under the tree node. So what is the real node? As mentioned above, the tree panel is bound to treestore. In extjs, store is a set of model instances. The tree node is only the decoration interface of the model instance through nodeinterface. The advantage of decorating the model with nodeinterface is that the model has new methods and attributes in the tree control state. The following shows the structure of the node in the development tool.

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 atreestore. A Store
In ext JS manages a collection ofmodel instances. Tree nodes are simply model instances that are decorated with anodeinterface.
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.

For more information about node attributes, methods, and events, see the API documentation.

In order to see the full set of fields, methods and properties available on nodes, see the API documentation for thenodeinterface class.

Change the appearance of the tree by using the always-changing your tree

Let's try something simple. When you set usearrows to true, the tree panel hides the lines next to it, and uses the icon arrow to show expansion and collapse.

Let's try something simple. When you set
Usearrows configuration to true, the tree panel hides the lines and uses arrows as expand and collapse icons.

You can set the root node rootvisible to determine whether the root node is displayed or not. In this case, the root node will automatically expand. The following figure shows the tree where rootvisible is set to false and lines is set to false.

Setting
Rootvisible property to false automatically removes the root node. By doing this, the root node will automatically be expanded. The following image shows the same treerootVisibleSet to false andlines
Set to false.

Multiple Columns

Since the tree panel and grid panel come from the same base class, it is very easy to create multiple columns.

Since
Tree panel extends from the same base class
Grid panel adding more columns is very easy to do.

var tree = Ext.create('Ext.tree.Panel', {    renderTo: Ext.getBody(),    title: 'TreeGrid',    width: 300,    height: 150,    fields: ['name', 'description'],    columns: [{        xtype: 'treecolumn',        text: 'Name',        dataIndex: 'name',        width: 150,        sortable: true    }, {        text: 'Description',        dataIndex: 'description',        flex: 1,        sortable: true    }],    root: {        name: 'Root',        description: 'Root description',        expanded: true,        children: [{            name: 'Child 1',            description: 'Description 1',            leaf: true        }, {            name: 'Child 2',            description: 'Description 2',            leaf: true        }]    }});

In the same way as the grid panel, configure Ext. Grid. Column. column. The tree panel is also configured through the columns array. The only difference is that the tree panel must have at least one xtype column that is "treecolumn. This type of column is designed based on the tree and has features such as depth, lines, and expanded and closed icons. A typical tree panel is a separate "treecolumn ".

The
Columns configuration expects an array
Ext. Grid. Column. Column tolerations just like
Grid panel wocould 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 wocould
Have only one 'treecolumn '.

The configuration item fields is copied from the internal store to the model (For details, refer to the model section of data guide ). Note that the dataindex configuration is mapped to the field.

ThefieldsConfiguration is passed on to the model that the internally created store uses (see thedata guide for more information onmodels ).
Notice how thedataindex configurations on the columns map to the fields we specified-Name and description.

It should be suggested that when no columns are defined, the tree will automatically create a separate treecolumn with a "text" dataindex. The tree header is also hidden. You can set the hideheaders configuration item to false.

It is also worth noting that when columns are not defined, the tree will automatically create one singletreecolumnWithdataIndexSet to 'text'. It also hides the headers on the tree. To show this header when using only a single
Column sethideHeadersConfiguration to 'false '.

Add node adding nodes to the tree

You do not have to add all nodes to the tree during configuration, and add them later.

The root node for the tree panel does not have to be specified in the initial configuration. We can always add it later:

var tree = Ext.create('Ext.tree.Panel');tree.setRootNode({    text: 'Root',    expanded: true,    children: [{        text: 'Child 1',        leaf: true    }, {        text: 'Child 2',        leaf: true    }]});

In this way, adding a few nodes to a static tree is no problem, but in general, the tree panel will still dynamically add many nodes. Then let's look at how to add a new node tree through programming.

Although this is useful for very small trees with only a few static nodes, most tree panels will contain limit more nodes. so let's take a look at how we can programmatically add new nodes to the tree.

var root = tree.getRootNode();var parent = root.appendChild({    text: 'Parent 1'});parent.appendChild({    text: 'Child 3',    leaf: true});parent.expand();

As long as it is not a leaf node, it has an appendchild method that is sent to an instance of a node or the configuration item object of the node as a parameter. This method returns the newly created node. In the previous example, the expand method of the newly created node is called.

Every node that is not a leaf node has
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 CILS theexpand
Method to expand the newly created parent.

In addition, you can create a parent node using inline writing. The next example is the same as the previous example.

Also useful is the ability to define children inline when creating the new parent nodes. The following code gives us the same result.

var parent = root.appendChild({    text: 'Parent 1',    expanded: true,    children: [{        text: 'Child 3',        leaf: true    }]});

Sometimes we want to insert a node to a fixed position. In this case, the insertbefore or insertchild methods are provided by Ext. Data. nodeinterface.

Sometimes we want to insert a node into a specific location in the tree instead of appending it. BesidesappendChildMethod, ext. Data. nodeinterface
Also provides
Insertbefore and
Insertchild methods.

var child = parent.insertChild(0, {    text: 'Child 2.5',    leaf: true});parent.insertBefore({    text: 'Child 2.75',    leaf: true}, child.nextSibling);

The insertchild method requires a child to be inserted into the index. The reference node predicted by the insertbefore method. Insert a new node before the reference node.

TheinsertChildMethod expects an index at which the child will be inserted.insertBeforeMethod expects a reference node. The new node will be inserted before the reference node.

Nodeinterface also provides the following attributes for other nodes to use for reference.

Nodeinterface also provides several more properties on nodes that can be used to reference other nodes.

• Nextsibling
• Previussibling
• Parentnode
• Lastchild
• Firstchild
• Childnodes