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