最近调试EXTJS 4的treegrid实例，看了很多水友的文章，以及官方的demo， 没一个可靠的，全都无法显示出来。像对于我们习惯用C++的coder来说，EXTJS简直就是一群无政府土匪来维护的，官网上连个搜索框都没有，找资料基本靠遍历，还是人工的。

使用treegrid，需要在调用页面的head中加载以下几个文件：
复制代码 代码如下:
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="treegrid.js"></script>

然后在页面的body中写上一个div
复制代码 代码如下:
&nbsp;<div id="tree-example"></div>

以上官方就这么写的，BUT，蛋疼的是，JS里没有改，不改就没法运行成功。把treegrid.js中的renderto，改成我们的div的ID就行了。

记得把json数据文件和css文件等拷贝到调用目录下。
完成的treegrid.js代码为：
复制代码 代码如下:
/*
This file is part of Ext JS 4
Copyright (c) 2011 Sencha Inc
Contact: http://ponent 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
}]
});
});