在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()