请教下extjs treeloader加载树的原理是什么？

Question

 最好有例子说明，我指的是从远程加载树，也就是从数据库读取树的数据。 下面有我的页面，实现的是两级树，增删改功能都有. 现在我想做成3级以上的，我想到的解决方案就是把树放到store里。 请教实现方案

Answer 1

loader : new Ext.tree.JsonPluginTreeLoader({ 
                                    url : 'findTree.action' 
                                }), 
                        root : new Ext.tree.AsyncTreeNode({text : '菜单', expanded:true}), 
                        listeners : { 
                            'click' : { 
                                fn :this.onTreeNodeClick, 
                                scope : this 
                            }, 
                            'afterrender':{ 
                                fn : this.onExpandAll, 
                                scope : this 
                            } 
                        }

Answer 2

对于ExtJS中的树来说，树加载器TreeLoader是一个比较关键的部件，树加载器由Ext.tree.TreeLoader类定义，只有AsyncTreeNode才会使用TreeLoader。看下面的代码：  

  

Ext.onReady(function(){  

  

var loader=new Ext.tree.TreeLoader({  

//url:"treedata.js"  

  

url:'AAA.do?content.method=getTreeNodes&parentId=0'  

});  

var root=new Ext.tree.AsyncTreeNode({  

id:"root",   

text:"根节点",  

loader:loader});   

var tree=new Ext.tree.TreePanel({  

renderTo:"hello",  

root:root,  

width:100  

});  

  

});   

  

首先我们使用Ext.tree.TreeLoader来初始化了一个TreeLoader对象，构造函数中的配置参数url表示获得树节点信息的url。然后在初始化根节点的时候我们使用的是AsyncTreeNode，在该节点中指定该节点的 laoder为前面定义的loader。执行这段程序，在点击“根节点”时，会从服务器端指定root节点的子节点信息。    

 　　TreeLoader严格来说是针对树的节点来定义的，可以给树中的每一个节点定义不同的TreeLoader，默认情况下，如果一个 AsyncTreeNode节点在准备加载子节点的时候，如果该节点上没有定义loader，则会使用TreePanel中定义的loader作为加载器。因此，我们可以直接在TreePanel上面指定loader属性，这样就不需要给每一个节点指定具体的TreeLoader了。  

  

    监听TreePanel的beforeload（node）事件，当点击不同的树节点时，将树节点ID传到后台获得该node节点的下级节点。  

  

如：tree.on('beforeload',function(node){  

  

tree.loader.dataUrl='AAA.do?content.method=getTreeNodes&parentId='+node.id;   

  

});  

  

获得TreeNode自定义属性值的方法：node.attributes.XXX。XXX为自定义属性。