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()
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值