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
    }
   });
}

}
});