ExtJS Dynamic load Tree Treepanel

First look at the effect:

One, create a new Treestore, and add the root node

Ext.define (' Demo1.store.TreeDemoStore ', {    ' Ext.data.TreeStore ',    root: {        ' directory tree ',         0    }});

Second, add Treepanel in view, bind Treedemostore

Ext.define (' Demo1.view.MyViewport ', {    ' Ext.container.Viewport ',    function  () {        varthis;        Ext.applyif (Me, {            items: [                {                    ' Treepanel ',                    ID: ' Treedemo ',                    height : $,                    store: ' Treedemostore ',                    autoscroll:true                }            ]        });          This . Callparent (arguments);    }});

Third, load the tree in the controller's Onlaunch method

Ext.define (' Demo1.controller.MyController ', {extend:' Ext.app.Controller ', Init:function(application) {}, Onlaunch:function () {        //Request Data List (where the data is saved it's up to you, I'll write it first) ID: node Id;text: node name; PID: parent Node ID        varinfo =[{ID:' 1 ', text: ' Two-level node 1 ', PID: ' 0 '}, {ID:' 2 ', text: ' Two-level Node 2 ', PID: ' 0 '}, {ID:' 3 ', text: ' Two-level node 3 ', PID: ' 0 '}, {ID:' 4 ', text: ' Two-level node 1-Three-node 1 ', PID: ' 1 '}, {ID:' 5 ', text: ' Two-level node 1-three-node 2 ', PID: ' 1 '}, {ID:' 6 ', text: ' Two-level node 2-three-node 1 ', PID: ' 2 '}, {ID:' 7 ', text: ' Two-level node 2-three-node 2 ', PID: ' 2 '}, {ID:' 8 ', text: ' Two-level node 2-three-node 1-Four-node 1 ', PID: ' 6 '}, {ID:' 9 ', text: ' Two-level node 2-three-node 1-Four-node 2 ', PID: ' 6 '            }        ]; varstore = Ext.data.StoreManager.lookup (' Treedemostore '); varRoot =Store.getroot (); Appendtreechildnodes (Root,0, info); }});//load child nodes based on parent node IDfunctionappendtreechildnodes (node, PID, infos) {varChildren = []; varChildmodel = {};  for(vari = 0; i < infos.length; i++) {        if(Infos[i].pid = =pid) {Childmodel= {}; Childmodel.text=Infos[i].text;; Childmodel.id=infos[i].id; Childmodel.pid=Infos[i].pid;            Children.push (Childmodel); Infos.splice (i,1); I--;    }} node.appendchild (children); if(Node.haschildnodes ()) {Node.eachchild (function(Child) {appendtreechildnodes (Child, Child.get (' id '), infos);//Recursive        }); }    Else{Node.set (' Leaf ',true); }}

OK, so simple, the following attached source: Extjsdemo-treepanel