Extjs 的树形结构、动态加载子节点

Question

"要求：页面加载显示一级菜单，点某个加号时读出其下的子菜单... 最好完整的例子，大家快帮忙啊，多给分的！！网上找太多了，都不符合要求，就没个做出来的么？着急用，还请大家帮忙！"请问你怎么做的 ？

Answer 1

treepanel部分的代码我就不写了，下面是store部分的代码。

var tree_store = Ext.create('Ext.data.TreeStore',{
   root: {
      id: 0,
      text: "根节点"
   }
   proxy: {
      type: "ajax",
      url: "tree_store.php"
   }
});

tree_store.php代码说明：

每次点击树形菜单中的节点时，实际上是访问 tree_store.php?node=id 这个路径其中对应当前节点id的值。

如上面例子中，当点击根节点时，相当于访问tree_store.php?node=0

因此，tree_store.php只需要根据地址栏参数node，显示对应子节点，并转换成json即可。

tree_store的json的格式建议查询官方文档。

追问

可是这相当于把store给动态化了，咱们要的是点击某个节点只显示 它下一层的节点们，击假如根节点为node0，你点node1之后，传向后台只取node1下级的做成json串传给store的话，此时node0会不会给覆盖了啊？

追答

extjs很智能，不会覆盖。

当你点击任意节点，如果节点的leaf为false，并且当前store中没有children的设置，就会连接服务器查询对应子节点。

如果已经有children的设置（设置为空也行），再次点击的时候就不会加载子节点了。

也就是说，只有第一次点击节点才会连接服务器加载子节点，再次点击不会连接服务器的。

上面的例子，如果改成

root: {

   id: 0,

   leaf: true,     // 节点为叶节点，不会加载子节点

}

或者

root: {

   id: 0,

   children: [],     // 设置子节点为空，同样不会加载子节点

}

下面是完整的代码：

js：

var store = Ext.create('Ext.data.TreeStore', {
root: {
id: 0,



},
proxy: {
type: "ajax",
url: "store_tree.php"
}
});

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
margin: 5,
rootVisible: true,
singleExpand: true,
store: store,
renderTo: Ext.getBody()
});