最近调试EXTJS 4的treegrid实例，看了很多水友的文章，以及官方的demo， 没一个可靠的，全都无法显示出来。像对于我们习惯用C++的coder来说，EXTJS简直就是一群无政府土匪来维护的，官网上连个搜索框都没有，找资料基本靠遍历，还是人工的。
使用treegrid，需要在调用页面的head中加载以下几个文件：
复制代码 代码如下:
然后在页面的body中写上一个div
复制代码 代码如下:
以上官方就这么写的，BUT，蛋疼的是，JS里没有改，不改就没法运行成功。把treegrid.js中的renderto，改成我们的div的ID就行了。
记得把json数据文件和css文件等拷贝到调用目录下。
完成的treegrid.js代码为：
复制代码 代码如下:
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);
Ext.onReady(function() {
//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.json'
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'tree-example',//2B的官方和SV党们，这里竟然是getbody，bo你妹啊。
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
}]
});
});
