A brief introduction of ExtJS4.0.7 tree formation Treepanel

ExtJS4 Tree Component TreeExt.tree.Panel Ext.data.Tree Ext.data.NodeInterface Ext.data.TreeStore Ext.tree.View

The related classes have Panel,tree, Nodeinterface,treestore,view. Looking from the Treepanel, Treepanel mainly provides the UI presentation of the tree structure data. A treepanel must be bound to a treestore. Treepanel supports the configuration of multiple columns through columns.

Tree node Nodeinterface provides configuration items:
Allowdrag: Whether to allow dragging
expandable: whether to allow folding
expanded: whether to expand
the leaf: whether it is a leaf
Isfirst:
islast:
loaded:
loading:
root: Roots text
: Text ...

The tree node configuration [Root>>children] Each node has: text to display, whether the leaf is leaf, expanded whether expand, and so on.
var store = ext.create (' Ext.data.TreeStore ', {
    root: {
        expanded:true,
        children: [
            {text:] Detention ", leaf:true},
            {text:" Homework ", expanded:true, children: [
                {text: book, leaf:true},
                {text : "Alegrbra", Leaf:true}
            ]},
            {text: "Tickets", leaf:true}
        ]
    }
);
Create Treepanel rootvisible Indicate whether the root node displays
ext.create (' Ext.tree.Panel ', {
    title: ' Simple Tree ',
    width:200,
    height:150,
    store:store,
    rootvisible:false,
    renderTo:Ext.getBody ()
});

You do not need to explain each parameter one by one, but note that each parameter has a default value, and the default value is used when there is no explicit configuration.
////Tree node ItemClick event L
Ext.create (' Ext.tree.Panel ', {
    title: ' Simple Tree ',
    width:200,
    height:150,
    Store:store,
    Rootvisible:false,
    listeners: {
	itemclick:function (view,record,item,index,e,eopts) { 
                 //from record item Index and other parameters we can get most of the information that satisfies our application
               if (record.get (' text ') = = ' book ') {//do somethings ...};
               if (Record.get (' text ') = = ' Detetion ') {//do something ...}
    }} RenderTo:Ext.getBody ()
});