ExtJS学习笔记（七） 使用树控件TreeNode

在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中中当前选择节点，代码如下：

tree.getSelectionModel().getSelectedNode()