ext 4.0 学习笔记（2）Tree Grid
今天学习的是：Array Grid，效果如下：
字体大小扭扭曲曲，是IE8自身的问题，google浏览器显示正常
HTML代码如下：
TreeGrid Example
注意编码方式使用gb2312
讲解代码前，首先先讲解一些类之间的关系（以后会抽出专门的一次笔记来讲述EXT对象之间的关系），
Ext.data.Model 数据模型类
Ext.data.TreeStore树形的数据源
Ext.tree.Panel树形结构的数据板块
Ext.tree.Panel是一个树形结构的数据板块，需要获取store作为数据源，所以需要定义一个Ext.data.Store作为数据源，但是这里需要使用到树形结构，所以我们需要使用Ext.data.Store的子类Ext.data.TreeStore，而Ext.data.TreeStore也仅仅是一种数据源，如果没有按照Ext.tree.Panel能够识别的方式进行构造，Ext.tree.Panel便无法识别数据源，所以在获取Ext.data.TreeStore时，需要按照Ext.data.Model进行规律性的填充。而Ext.data.Model要和Ext.tree.Panel的数据格式相互一致。
用类比的方式讲解可能会更清晰一些， Ext.tree.Panel比作一张表，Ext.data.Model则是一句insert SQL语句，而Ext.data.TreeStore是原始的，散列的数据。
这样相信能很清晰的看清楚其中的关系吧？
下面贴出带注释的代码：
tree.js
//引用需要包含的类
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);
Ext.onReady(function() {
//we want to setup a model and store instead of using dataUrl
//译文：我们打算安装一个数据模型和数据源来取代dataUrl
//定义一个名为Task的Ext.data.Model类，是一种模型结构，有三列，分别是task、user、duration
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{ name: 'duration', type: 'string' }
]
});
//创建一个树形结构的数据源，并按照Task的模型进行填充
var store = Ext.create('Ext.data.TreeStore', {
//填充的数据模型对象
model: 'Task',
//数据访问对象
proxy: {
//填充方式
type: 'ajax',
//the store will get the content from the .json file
//译文：数据源将会从.json文件中获取数据
//获取数据源的相对路径，这里就体现出jsp中servlet的优势所在了，直接填写拦截路径就OK
url: 'treegrid.json'
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
//译文：Ext.ux.tree.TreeGrid不是一个较长的Ux，你可以简单地使用一个tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: '树形结构标题',
width: 500,
height: 300,
//这里指定HTML标签body里面填充这个Ext.tree.Panel
//renderTo: Ext.getBody(),
//这里指定HTML标签使用了ID为tree-example填充这个Ext.tree.Panel
renderTo: 'tree-example',
//True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
collapsible: true,
//是否使用vista默认的树形结构箭头
useArrows: true,
//是否隐藏根节点，默认为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: '文档结构',
flex: 2,
sortable: true,
dataIndex: 'task'
},{
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: '持续时间',
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: '分配至',
flex: 1,
dataIndex: 'user',
sortable: true
}]
});
});
tree.json
{"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'
},{
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'
},{
task: 'Fix lights',
duration: .75,
user: 'Tommy Maintz',
leaf: true,
iconCls: 'task'
}, {
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
}]
}]
}
]}