Getting Started with ExtJS tree controls

The ExtJS tree control is defined by the Ext.tree.TreePanel class, and the control's name is Treepanel,treepanel inherited from the Panel class, and using a tree control in ExtJS is actually simple.

You know that to use ExtJS must introduce his library, so we are going to introduce the following several files:

Ext-all.css

Ext-base.js

Ext-all.js

PS: I am using the extjs3.0 version

How do I load the plugin? Rest assured, ExtJS has its own method of loading:

Ext.onready (function () {

Coding ...

}

The following is the instance code:

Tree control        var root = new Ext.tree.TreeNode ({            id: ' Root ',            text: "Root of Tree"        });        var root2=root.appendchild (New Ext.tree.TreeNode ({            ID: "C1",            text: "First layer"        }));        Root2.appendchild (New Ext.tree.TreeNode ({            ID: "C3",            Text: "2nd"        });        Root.appendchild ({            ID: "C2",            text: "First layer 2"        });        var tree=new Ext.tree.TreePanel ({            renderTo:Ext.getBody (),            root:root,            width:100        });

View Code

This example is a three-tier structure, in which we can set the position of the node according to the level of the node.