最新项目中用到TreeGrid,查阅了很多资料,总的来说有些心得,愿意拿出来和大家一起分享一下:
一、在页面中引入 :ext-all.css、treegrid.css、ext-base-debug.js、ext-all-debug.js、TreeGridSorter.js、TreeGridColumnResizer.js、TreeGridNodeUI.js、TreeGridLoader.js、TreeGridColumns.js、TreeGrid.js
二、为了保持代码规范,创建一个myTreeGrid.js,引入页面。
三、myTreeGrid.js中的代码:
对于处理数据量小的,可以把数据一次性加载进来,代码如下:
Ext.onReady(function() {
Ext.QuickTips.init();
//定义树的加载器,采用的MVC取的数据,返回的是JSON数据格式
var treeloader = new Ext.ux.tree.TreeGridLoader({
dataUrl: "/TreeData/GetTreeJsonData"
});
var treeGrid = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(), //渲染
enableDD: true, //节点是否可移动
columns:[{
header: 'Task',
dataIndex: 'task', //索引,与JSON数据中的某个名称对应
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
loader: treeloader //加载数据
});
});
实现异步加载数据,代码如下:
Ext.onReady(function() {
Ext.QuickTips.init();//实现智能提示的作用
var treeGrid = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(), //渲染
enableDD: true, //节点是否可移动
columns:[{
header: 'Task',
dataIndex: 'task', //索引,与JSON数据中的某个名称对应
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
requestUrl: '/TreeData/GetTreeJSONData/?NodeName='
listeners: { //监听事件
'beforeload': function (node) {//节点加载前
if (node.isRoot) { //首次加载
this.loader.dataUrl = this.requestUrl;
}else {
var nodeText = node.attributes["text"]; //取得点击节点名称
var rqtUrl = this.requestUrl + nodeText; //得到新的URL地址
if (node.attributes.loader.dataUrl) {
this.loader.dataUrl = rqtUrl //点击节点,后台请求数据
}
}
this.root.attributes.loader = null; //防止节点的重复加载
}
}
});
});
四、JSON数据
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript的一个子集。Extjs中应用较多的,例如Tree、Gridview、Combo等,一般都会用到JSON提供数据,简单方便。
五、以上都是个人的心得,用的是.NET MVC2开发环境。