假设您是第一次使用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,150 }, { header: '节点IP', dataIndex: 'ip', align : 'center',sortable:false,150 }, { header: '端口号', dataIndex: 'port',align : 'center',sortable:false,50 }, { header: '节点描写叙述', dataIndex: 'desc',align : 'center',sortable:false,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属性,否则无法显示树形