How to use ExtJS Treegrid

If you are the first to use ExtJS Treegrid, I believe there will always be some small trouble, the following is to say ExtJS in the use of Treegrid.

I use the ExtJS version number 4.1.1, and the MVC pattern is used. Assuming you don't understand the MVC pattern of ExtJS, I think it's necessary to learn something.
You'll love it when you finish your study.
In fact there is no treegrid such a class in ExtJS, this argument is borrowed from Easyui, ExtJS Treegrid function has been in the Ext.tree.Panel.

The Treegrid is probably the way it appears:

Here is the source code for this sample:

View:

Ext.define ("Node.view.NodeListPanel", {extend: "Ext.tree.Panel", Alias: "Widget.nodelistpanel", Title: "Node Management", Colum  Nlines:true, Region: ' Center ', root:{ID: ' Root ', Name: ' Node Management ', expanded:true}, columns: [{xtype: ' Treecolumn ', Header: ' Node name ', Dataindex: ' Name ', sortable:false,flex:1}, {header: ' Node encoding ', Dataindex: ' Code ', align: ' center ', sortable:false,width:150}, {header: ' node IP ', dataindex: ' IP ', align : ' Center ', sortable:false,width:150}, {header: ' Port number ', Dataindex: ' Port ', align: ' center ', Sortable:false,width:        {header: ' Description of Node ', Dataindex: ' Desc ', align: ' center ', sortable:false,width:200}], loadmask:{ Msg: ' Loading data, please wait a moment ... '}, Store:Ext.create (' Node.store.NodeStore '),//store: "Nodestore", renderTo:Ext.ge TBody ()}); 

Store:

Ext.define ("Node.store.NodeStore", {    Extend: ' Ext.data.TreeStore ',    //model: ' Node.model.Node ',// Data proxy cannot be passed with model    : {        type: ' Ajax ',        URL: ' Data/nodetree.json ',        Reader: ' json ',        autoload:true< c9/>}, Fields    : [{        name: ' ID ',        type: ' String '    }, {        name: ' Name ',        type: ' String '    }, {        name: ' Code ',        type: ' String '    }, {        name: ' IP ',        type: ' String '    }, {        name: ' Port ', C24/>type: ' String '    }, {        name: ' desc ',        type: ' String '}    ]});

Nodetree.json:

{"id": "root", "leaf": false, "name": "Root", "children": [{"id": "1", "leaf": True, "name"        : "Public Security", "code": 452363214, "IP": "192.168.0.203", "Port": 8080, "desc": "Public Security Node"}, {        "id": "4", "leaf": True, "name": "Court", "code": 452364587, "IP": "192.168.0.204", "Port": null, "desc": "Court Node"}, {"id": "9", "leaf": True, "name": "Inspection Yard", "code": 452312365, "IP": "192.168.0.205", "port": null, "desc": "Inspection Yard Node"}, {"id": "10", "        Leaf ": false," name ":" CCDI "," code ": 45234596," IP ":" 192.168.0.235 "," port ": null, "desc": "CCDI Node", "expanded": true, "children": [{"id": "2", "leaf": true, "NA  Me ":" Test Node "," code ": 45239658," IP ":" 192.168.0.255 "," port ": null," desc " : "Test Node"}]}]} 

Controller:

Ext.define (' Node.controller.NodeController ', {    extend: ' Ext.app.Controller ',    init:function () {        This.control ({        });    }, Views    : [        ' Nodelistpanel '    ],    stores: [        //"Nodestore"    ],    models: [        //"Node"    ]});

App.js:

Ext.onready (function () {    Ext.Loader.setConfig ({        enabled:true    });    Ext.application ({        Name: "Node",        Appfolder: ".",        launch:function () {            ext.create (" Ext.container.Viewport ", {                layout:" Border ",                items: [{                    xtype:" Nodelistpanel "                }]            });        ,        controllers: [            ' Nodecontroller '        ]    });

There are two very strange places here:
1. Nodelistpanel specify store, can not be directly configured to store: "Nodestore" Let it dynamically loaded, and to be directly created, so do not specify Nodestore in the controller is also able to
2. Nodestore cannot specify model directly. Instead of configuring its Fields property, the configuration model doesn't work for treestore.
The above two points as to why this, I did not go to the deep, look at the direct guidance of an expert.

Another thing to be aware of is that you must configure the root property for Treepanel, or you will not be able to display the tree

How to use ExtJS Treegrid