ext js中的树treepanel

今天用ext做一个简单的树形菜单，第一次做，所以当中也出现了很多小问题，但是最终还是解决了！入门用，慢慢完善 ！首先把代码贴出来：

后台代码（我没有经过数据库就在后台自己填充了一些数据）这是一个spring mvc的controller 返回一个list  会自动转化为json数据 treepanel里面默认的是需要json数组：

@RequestMapping("role/getRoleList.do")

 @ResponseBody

 public List<SysRole> getRoleList(Model model) {

  List<SysRole> roleList = new ArrayList<SysRole>();

  List<SysRole> childRoleList1 = new ArrayList<SysRole>();

  SysRole childRole1 = new SysRole(3, "部门经理",true);

  childRoleList1.add(childRole1);

  SysRole role = new SysRole(1, "角色组1", childRoleList1,false);

  List<SysRole> childRoleList2 = new ArrayList<SysRole>();

  SysRole childRole2 = new SysRole(4, "项目经理",true);

  childRoleList2.add(childRole2);

  SysRole role2 = new SysRole(2, "角色组2", childRoleList2,false);

  List<SysRole> childRoleList3=new ArrayList<SysRole>();

  SysRole childRole3=new SysRole(5,"程序员 ",true);

  childRoleList3.add(childRole3);

        SysRole role3=new SysRole(6, "角色组3", childRoleList3,false);

        SysRole role4=new SysRole(7, "直接角色", true);

  roleList.add(role);

  roleList.add(role2);

  roleList.add(role3);

  roleList.add(role4);

  return roleList;

 }

后面到前台的json数组格式为：

[{"children":[{"children":null,"text":"部门经理","roleId":3,"leaf":true}],"text":"角色组1","roleId":1,"leaf":false},{"children":[{"children":null,"text":"项目经理","roleId":4,"leaf":true}],"text":"角色组2","roleId":2,"leaf":false},{"children":[{"children":null,"text":"程序员 ","roleId":5,"leaf":true}],"text":"角色组3","roleId":6,"leaf":false},{"children":null,"text":"直接角色","roleId":7,"leaf":true}]

注意：前台默认的时候需要children text leaf来表示 所以我的model类里面也用这几个名字作为字段名称 ，否则显示不出来，当然你也可以前台去转换，我这里没有做，这样做简单方便！

前台代码：

// 加载所有的角色

   var rolesLoader = new Ext.tree.TreeLoader({

    dataUrl : 'role/getRoleList.do'  //这里请求得到数据

   });

   var rootNode = new Ext.tree.AsyncTreeNode({

    id : 'RoleList',

    text : '角色列表',

    loader : rolesLoader

   });

var roleTreePanel =new Ext.tree.TreePanel({

    width : 250,

    height : 360,

    autoScroll : true,

    autoDestroy : true,

    root : rootNode

}）;

最终生成的 树形结构为：