ExtJS4学习笔记(十九)---TreeGrid

本文介绍Extjs4 TreeGrid的使用，实例中的树实现了多表头、使用AJAX请求载入数据、排序，隐藏和显示表头等Grid中的功能。实例来自Extjs官方网站

HTML代码：

<divid="tree-example"></div>

JS代码：

Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);

Ext.onReady(function(){
//wewanttosetupamodelandstoreinsteadofusingdataUrl
Ext.regModel('Task',{
fields:[
{name:'task',type:'string'},
{name:'user',type:'string'},
{name:'duration',type:'string'}
]
});

varstore=newExt.data.TreeStore({
model:'Task',
proxy:{
type:'ajax',
//thestorewillgetthecontentfromthe.jsonfile
url:'treegrid.json'
},
root:{
expanded:true
}
});

//Ext.ux.tree.TreeGridisnolongeraUx.Youcansimplyuseatree.TreePanel
vartree=newExt.tree.TreePanel({
title:'CoreTeamProjects',

width:500,
height:300,
renderTo:Ext.getBody(),

useArrows:true,
rootVisible:false,

store:store,

//the'columns'propertyisnow'headers'
headers:[{
xtype:'treeheader',//thisissoweknowwhichcolumnwillshowthetree
text:'Task',
flex:2,
dataIndex:'task'
},{
//wemustusethetemplateheadercomponentsowecanuseacustomtpl
xtype:'templateheader',
text:'Duration',
flex:1,
dataIndex:'duration',
align:'center',
//addinthecustomtplfortherows
tpl:newExt.XTemplate('{duration:this.formatHours}',{
formatHours:function(v){
if(v<1){
returnMath.round(v*60)+'mins';
}elseif(Math.floor(v)!==v){
varmin=v-Math.floor(v);
returnMath.floor(v)+'h'+Math.round(min*60)+'m';
}else{
returnv+'hour'+(v===1?'':'s');
}
}
})
},{
text:'AssignedTo',
flex:1,
dataIndex:'user'
}]
});
});

实例使用JSON数据格式，要求返回类似如下格式的数据：

[{"text":".","children":[
{
task:'Project:Shopping',
duration:13.25,
user:'TommyMaintz',
iconCls:'task-folder',
expanded:true,
children:[{
task:'Housewares',
duration:1.25,
user:'TommyMaintz',
iconCls:'task-folder',
children:[{
task:'Kitchensupplies',
duration:0.25,
user:'TommyMaintz',
leaf:true,
iconCls:'task'
},{
task:'Groceries',
duration:.4,
user:'TommyMaintz',
leaf:true,
iconCls:'task'
},{
task:'Cleaningsupplies',
duration:.4,
user:'TommyMaintz',
leaf:true,
iconCls:'task'
},{
task:'Officesupplies',
duration:.2,
user:'TommyMaintz',
leaf:true,
iconCls:'task'
}]
}]
}]
}]