使用Ext2的Tree组件

（原创文章，转载请注明出处）

首先生成Json格式的字符串（写了一个TreeNode对象，专门生成这种格式的字符串）：

[
 {text:'用户管理',leaf:false,children:
  [
   {text:'建立用户',leaf:false,children:
    [
     {text:'用户设置',
      href:'/myapp/app?page=destPage &service =external',
      hrefTarget:'listFrame',leaf:true}
    ]
    },
    {text:'历史查询',leaf:true}
  ]
 }
] 

使用Ext.tree.TreePanel生成树视图：

 

var  Tree  =  Ext.tree;
// 系统管理菜单树
var  xtglTree  =   new  Tree.TreePanel( ... {
        el:'xtgl',
        animate:true, 
        autoScroll:true,
        loader: new Tree.TreeLoader(),
        enableDD:false,
        containerScroll: true,
        dropConfig: ...{appendOnly:true},
         rootVisible:false
    } );

// json格式的字符串放在html页面的元素value属性中    
var  json  =  Ext.get( " xtglMenu " ).getAttributeNS( "" , " value " );

var  root_xtgl  =   new  Tree.AsyncTreeNode( ... {
        text: '功能树', 
        draggable:false, // disable root node dragging
        id:'xtglRoot',
        children:JSON.decode(json)
    } );

xtglTree.setRootNode(root_xtgl);        
//  render the tree
xtglTree.render();
root_xtgl.expand( false );

生成的树如下图：

一切都这么简单。