在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表表示树的节点。在ExtJS中,有两种类型的树节点。一种节点是普通的简单树 节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该类由Ext.tree.AsyncTreeNode定 义。 看下面的代码:

Ext.onReady(function(){ 
 var tree=new Ext.tree.TreePanel({
 renderTo:"hello",
 root:new Ext.tree.AsyncTreeNode({ 
 text:"根节点"
 }),
 width:100
 }); 
 });

执行程序,点击树中的“根节点”则会一直发现树会尝试加载这个节点的子节点,由这里没有指定树的加载器,所以“根节点”会变成一直处于加载的状态。如下图所示:

对于普通的TreeNode来说,可以通过调用节点的appendChild、removeChild等方法来往该节点中加入子节点或删除子节点等操作。

  TreeNode与AsyncTreeNode可以同时使用,比如下面的代码:

 

Ext.onReady(function(){

 var root=new Ext.tree.TreeNode({
 id:"root", 
 text:"树的根"
 }); 
 var c1=new Ext.tree.TreeNode({
 text:"子节点1"
 })
 var c2=new Ext.tree.AsyncTreeNode({
 text:"子节点2"
 });
 root.appendChild(c1);
 root.appendChild(c2); 
 var tree=new Ext.tree.TreePanel({
 renderTo:"hello",
 root:root,
 width:300,
 loader:new Ext.tree.TreeLoader({
 applyLoader:false,
 url:"treedata.js"
 })
 });

 });
 treedata.js中的内容仍然是:
 [{
         id: 1,
         text: '子节点'
     }]

执行上面的程序可以得到一棵如下图所示的树:

   另外要在树以外的程序中得到当前选择的节点,可以通过TreePanel的getSelectionModel方法来获得,该方法默认返回的是 Ext.tree.DefaultSelectionModel对象,DefaultSelectionModel的getSelectedNode方法 返回当前选择的树节点。比如要得到树tree中中当前选择节点,代码如下:

  对于普通的TreeNode来说,可以通过调用节点的appendChild、removeChild等方法来往该节点中加入子节点或删除子节点等操作。

  TreeNode与AsyncTreeNode可以同时使用,比如下面的代码:

执行上面的程序可以得到一棵如下图所示的树:

另外要在树以外的程序中得到当前选择的节点,可以通过TreePanel的getSelectionModel方法来获得,该方法默认返回的是 Ext.tree.DefaultSelectionModel对象,DefaultSelectionModel的getSelectedNode方法 返回当前选择的树节点。比如要得到树tree中中当前选择节点,代码如下:

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

Ext.onReady(function(){

 var loader=new Ext.tree.TreeLoader({
 url:"treedata.js"
 });
 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了。