extjs 树形控件(treePanel)

  树形控件
  树形控件由Ext.tree.TreePanel类定义.控件的名字为treePanel.TreePanel面板.在Extjs中使用树控件其实很简单.
  树的节点信息.Extjs的树形控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,

  可以用来从服务器段动态的加载树的节点信息.

 var store = Ext.create('Ext.data.TreeStore',{
     root:{
      expanded:true,
      children:[
      {text:'detention',expanded:true,children:[
      {text:'test1',leaf:true}] },
      {text:'homework',expanded:true,children:[
      {text:'book report',expanded:true,children:[{text:'test2',leaf:true}]},
      {text:'algebra',leaf:true}]},
      {text:'buy lottery tickets',leaf:true}]
     }
      });
      
      Ext.create('Ext.tree.Panel',{
     title:'Simple tree',
     width:200,
     height:200,
     store:store,
     rootVisible:false,
     renderTo:Ext.getBody()
      })

通过服务器端动态加载树的节点信息

Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
var root = new Ext.tree.AsyncTreeNode({
expanded:true,
text:'系统菜单',
id:'101',//系统默认为0
draggable:false,
iconCls:'b'
});
var tree = new Ext.tree.TreePanel({
title:'树形结构',
root:root,
border:false,
autoHeight:true,
renderTo:Ext.getBody(),
autoScoll:true,
animate:true,//true表示使用动画展开/折叠
enableDD:true,//允许拖放,
containerScoll:true,//登记本容器scollManager
listeners:{//在加载之前的一个监听事件
'beforeload':function(node){
//alert(node.id);//得到的节点id
   node.loader = new Ext.tree.TreeLoader({//树节点的数据来源
    url:"viewtree.do?id="+node.id,//请求的路经
    baseParams:{//请求参数
      id:node.id
    }
   });
}

}
});