不少开发者都遇到这样的困惑：照着官方文档里的 TreeGrid 示例敲代码，页面却一片空白，问题究竟出在哪？其实核心原因很简单——TreeGrid 继承自 TreePanel，它的数据来源并不是 store，而是根节点 root。理解这一点后，加载 JSON 数据就迎刃而解了。 下面分享一个经过验证的实现方法。首先创建根节点，然后通过递归方式将 JSON 数据转换为树节点，并逐层挂载。

复制代码 代码如下:

var root = new Ext.tree.TreeNode({
text: '根节点',
expanded: true
});
tree.setRootNode(root);
var nodes = {};
nodes.children = mydata;/*TreeGrid的json数据[{……},{……}]*/
function appendChild(node, o) {
if (o.children != null && o.children.length > 0) {
for (var a = 0; a < o.children.length; a++) {
var n = new Ext.tree.TreeNode({
task:o.children[a].task,
duration:o.children[a].duration,
user:o.children[a].user,
iconCls:o.children[a].iconCls
});
node.appendChild(n);
appendChild(n, o.children[a]);
}
}
}
appendChild(root, nodes);

从这段源码可以清楚看出，root 才是 TreeGrid 的数据起点，store 并没有直接参与数据填充。因此完全不用纠结 dataUrl 那一类远程加载方式，直接用这个递归方法将本地 JSON 数据传入即可呈现出树形表格。是不是比想象的简单很多？