extjs4 treeGrid使用

extjs4 treeGrid使用

   项目有一个需求是展示一个部门信息，但是这个部门下面有可能还存在子部门，用一般的trrPanel感觉效果不是太好，在官方的api上面找到treeGrid控件正好可以满足需求，但是悲催的是把api里面的代码拷到程序里面后没有效果，根据反复的修改终于可以用了：

[javascript]
Ext.define('SimpleTasks.view.organize.DeptGrid', { 
            extend : 'Ext.tree.Panel', 
            xtype : 'DeptGrid', 
            rootVisible : false, 
            id : "deptGrid", 
            collapsible : false,// 取消折叠按钮  
            useArrows : true, 
            rootVisible : false, 
            multiSelect : false, 
            singleExpand : true, 
            store : 'organize.DeptGrids', 
            columns : [{ 
                        xtype : 'treecolumn',// treecolumn只用放在需要点击展开的列上面（api上面每个列都放了这个）  
                        text : '部门名', 
                        dataIndex : 'name', 
                        flex : 1 
                    }, { 
                        text : '部门领导', 
                        dataIndex : 'leaderName', 
                        flex : 1 
                    }, { 
                        text : '部门人数', 
                        dataIndex : 'employeeCount', 
                        flex : 1 
                    }] 
        }); 

Ext.define('SimpleTasks.view.organize.DeptGrid', {
   extend : 'Ext.tree.Panel',
   xtype : 'DeptGrid',
   rootVisible : false,
   id : "deptGrid",
   collapsible : false,// 取消折叠按钮
   useArrows : true,
   rootVisible : false,
   multiSelect : false,
   singleExpand : true,
   store : 'organize.DeptGrids',
   columns : [{
      xtype : 'treecolumn',// treecolumn只用放在需要点击展开的列上面（api上面每个列都放了这个）
      text : '部门名',
      dataIndex : 'name',
      flex : 1
     }, {
      text : '部门领导',
      dataIndex : 'leaderName',
      flex : 1
     }, {
      text : '部门人数',
      dataIndex : 'employeeCount',
      flex : 1
     }]
  });
     store也有些不一样

[javascript]
Ext.define('SimpleTasks.store.organize.DeptGrids', { 
            extend : 'Ext.data.TreeStore', 
            model : 'SimpleTasks.model.organize.Department', 
            proxy : { 
                type : 'ajax', 
                url : Ext.dp + '/organize/queryDept.do' 
            }, 
            folderSort : true 
        }); 

Ext.define('SimpleTasks.store.organize.DeptGrids', {
   extend : 'Ext.data.TreeStore',
   model : 'SimpleTasks.model.organize.Department',
   proxy : {
    type : 'ajax',
    url : Ext.dp + '/organize/queryDept.do'
   },
   folderSort : true
  });       这个store没法取消自动加载，网上的解决办法是在store里面的beforeload事件上面作处理

      关于后台需要返回的json格式，官方的api给出的返回格式是{"text":".","children": []}这样的格式。但是我使用的时候就把后台的list集合转换成json格式传到前台就能显示，不需要去拼成api给出的那个格式