ExtJS TreeGrid的使用方法

假设您是第一次使用ExtJS的TreeGrid的话，我相信总会有一些小麻烦的，以下就来说一说ExtJS中TreeGrid的使用。

本人使用的ExtJS版本号为4.1.1，而且使用了MVC模式。假设不了解ExtJS的MVC模式的话我个认为还是有必要去学学的，
学完后你肯定会喜欢上的。
事实上在ExtJS中并没有TreeGrid这么一个类，这个说法是从EasyUI中借用过来的，ExtJS中的TreeGrid功能已经合在了Ext.tree.Panel中。

TreeGrid显示出来大概是这个样子：

以下是这个样例的源代码：

View:

Ext.define("node.view.NodeListPanel", {extend : "Ext.tree.Panel",alias : "widget.nodelistpanel",title : "节点管理",columnLines : true,region: 'center',root:{id:'root',name:'节点管理',expanded:true},columns: [{xtype : 'treecolumn',header: '节点名称',  dataIndex: 'name', sortable:false,flex:1}, {header: '节点编码', dataIndex: 'code',align : 'center',sortable:false,width:150}, {header: '节点IP',  dataIndex: 'ip', align : 'center',sortable:false,width:150}, {header: '端口号', dataIndex: 'port',align : 'center',sortable:false,width:50}, {header: '节点描写叙述', dataIndex: 'desc',align : 'center',sortable:false,width:200}],loadMask:{msg : '正在载入数据,请稍等...'},store : Ext.create('node.store.NodeStore'),//store : "NodeStore",renderTo: Ext.getBody()
});

Store:

Ext.define("node.store.NodeStore", {extend : 'Ext.data.TreeStore',//model : 'node.model.Node',//用model传递不了数据proxy : {type : 'ajax',url : 'data/NodeTree.json',reader : 'json',autoLoad : true},fields : [{name: 'id',type: 'string'}, {name: 'name',type: 'string'}, {name: 'code',type: 'string'}, {name: 'ip',type: 'string'}, {name: 'port',type: 'string'}, {name: 'desc',type: 'string'}]});

NodeTree.json :

{"id":"root","leaf":false,"name" : "root","children":[{"id":"1","leaf":true,"name" : "公安","code" : 452363214,"ip" : "192.168.0.203","port" : 8080,"desc" : "公安节点"}, {"id":"4","leaf":true,"name" : "法院","code" : 452364587,"ip" : "192.168.0.204","port" : null,"desc" : "法院节点"}, {"id":"9","leaf":true,"name" : "检查院","code" : 452312365,"ip" : "192.168.0.205","port" : null,"desc" : "检查院节点"}, {"id":"10","leaf":false,"name" : "纪检委","code" : 45234596,"ip" : "192.168.0.235","port" : null,"desc" : "纪检委节点","expanded":true,"children":[{"id":"2","leaf":true,"name" : "測试节点","code" : 45239658,"ip" : "192.168.0.255","port" : null,"desc" : "測试节点"}]}]
}

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']});
});

在这里有两个非常奇怪的地方：
1. NodeListPanel指定Store时，不能直接配置成store:"NodeStore"让其动态载入，而要直接创建出来，所以在Controller中不指定NodeStore也是能够的
2. NodeStore不能直接指定Model。而应该配置其fields属性取代，由于配置Model对TreeStore来说根本不起作用
以上两点至于为什么会这样，本人也没有去深究，望高人直接指点。

另一个须要注意的地方就是一定要为TreePanel配置root属性，否则无法显示树形