ExtJS TreeGrid的使用方法
2021-06-10 22:04
阅读：731
假设您是第一次使用ExtJS的TreeGrid的话，我相信总会有一些小麻烦的，以下就来说一说ExtJS中TreeGrid的使用。
Store:
NodeTree.json :
Controller:
app.js :
在这里有两个非常奇怪的地方：
1. NodeListPanel指定Store时，不能直接配置成store:"NodeStore"让其动态载入，而要直接创建出来，所以在Controller中不指定NodeStore也是能够的
2. NodeStore不能直接指定Model。而应该配置其fields属性取代，由于配置Model对TreeStore来说根本不起作用
以上两点至于为什么会这样，本人也没有去深究，望高人直接指点。
本人使用的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属性，否则无法显示树形
评论
亲，登录后才可以留言！