本节为ExtJS表格学习的最后一节，学完我将学习表单与输入控件的内容。
树形表格（TreeGrid）同时具备树形的分级结构和表格的丰富内容。
先引入扩展组件，老规矩：
//引入扩展组件
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ExtJS4.2/ux/');
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.ux.CheckColumn'
]);
接下来创建TreeGrid
Ext.onReady(function(){
Ext.QuickTips.init();
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: 'treegrid-data.json'
},
folderSort: true
});
//Ext.ux.tree.TreeGrid在UX扩展中也有，但不常用，您可以简单地使用一个tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'treegrid',
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
},{
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}, {
xtype: 'checkcolumn',
header: 'Done',
dataIndex: 'done',
width: 40,
stopSelection: false
}, {
text: 'Edit',
width: 40,
menuDisabled: true,
xtype: 'actioncolumn',
tooltip: 'Edit task',
align: 'center',
icon: '../MyDemo/p_w_picpaths/edit.png',
handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
}
}]
});
});
在列定义中有xtype: 'treecolumn',这是告诉列要以树形列来显示，在以后的表单或其他容器中也会以这样的方式来显示，有panelcolumn等，这里等以后讲到再说。
再看下JSON数据格式，后台只要符合这种形式，EXTJS就会给你自动解析出来：
{"text":".","children": [
{
task:'Project: Shopping',
duration:13.25,
user:'Tommy Maintz',
iconCls:'task-folder',
expanded: true,
children:[{
task:'Housewares',
duration:1.25,
user:'Tommy Maintz',
iconCls:'task-folder',
children:[{
task:'Kitchen supplies',
duration:0.25,
user:'Tommy Maintz',
leaf:true,
iconCls:'task'
},{
task:'Groceries',
duration:.4,
user:'Tommy Maintz',
leaf:true,
iconCls:'task',
done: true
},{
task:'Cleaning supplies',
duration:.4,
user:'Tommy Maintz',
leaf:true,
iconCls:'task'
},{
task: 'Office supplies',
duration: .2,
user: 'Tommy Maintz',
leaf: true,
iconCls: 'task'
}]
}, {
task:'Remodeling',
duration:12,
user:'Tommy Maintz',
iconCls:'task-folder',
expanded: true,
children:[{
task:'Retile kitchen',
duration:6.5,
user:'Tommy Maintz',
leaf:true,
iconCls:'task'
},{
task:'Paint bedroom',
duration: 2.75,
user:'Tommy Maintz',
iconCls:'task-folder',
children: [{
task: 'Ceiling',
duration: 1.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}, {
task: 'Walls',
duration: 1.5,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}]
},{
task:'Decorate living room',
duration:2.75,
user:'Tommy Maintz',
leaf:true,
iconCls:'task',
done: true
},{
task: 'Fix lights',
duration: .75,
user: 'Tommy Maintz',
leaf: true,
iconCls: 'task',
done: true
}, {
task: 'Reattach screen door',
duration: 2,
user: 'Tommy Maintz',
leaf: true,
iconCls: 'task'
}]
}]
},{
task:'Project: Testing',
duration:2,
user:'Core Team',
iconCls:'task-folder',
children:[{
task: 'Mac OSX',
duration: 0.75,
user: 'Tommy Maintz',
iconCls: 'task-folder',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}, {
task: 'Safari',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}]
},{
task: 'Windows',
duration: 3.75,
user: 'Darrell Meyer',
iconCls: 'task-folder',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}, {
task: 'Safari',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
},{
task: 'Internet Exploder',
duration: 3,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}]
},{
task: 'Linux',
duration: 0.5,
user: 'Aaron Conran',
iconCls: 'task-folder',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Aaron Conran',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Aaron Conran',
iconCls: 'task',
leaf: true
}]
}]
}
]}
这里还有一个扩展功能，如下：
表头点击箭头就会出现过滤组件，便于筛选数据，每列都有，是不是很丰富啊。
下面看代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Hello Extjs4.2 我的ExtJS4.2学习之路
作者：束洋洋 开始日期：2013年11月26日 22:57:53深入浅出ExtJS之树形表格
连载中，请大家继续关注！本文出自我的个人网站思考者日记网