Extjs分组显示数据的做法

Ext的分组显示数据跟一般的显示数据差不多，不同的如下：

 

// 定义数据源
 var roleLevelStore = new Ext.data.GroupingStore({
    // 代理
    proxy : new Ext.data.HttpProxy({
       url : Action.sys.RoleLevelMngAction.DO_GET_ALL,
       method : "POST"
      }),
    // 解析器
    reader : new Ext.data.JsonReader({
       fields : fields,
       root : "data",
       id : "ID",
       totalProperty : "totalCount"
      }, record),
    sortInfo : {
     field : 'ID',
     direction : 'ASC'
    },
    groupField : 'roleName'
   });

 

// 表格
 var RoleGrid = new Ext.grid.GridPanel({
    store : roleLevelStore,
    cm : cm,
    sm : sm,
    frame : false,
    loadMask : true,
    autoScroll : true,
    border : false,
    stripeRows : true,
    loadMask : {
     msg : '正在加载数据，请稍侯……'
    },
    view : new Ext.grid.GroupingView({
       forceFit : true,
       groupTextTpl : '{text} ({[values.rs.length]} {["项"]})'

      }),
    viewConfig : {
     columnsText : "显示/隐藏列",
     sortAscText : "正序排列",
     sortDescText : "倒序排列",
     forceFit : true
    },
    bbar : bottomBar,
    tbar : toolBar,
    listeners : {
     "contextmenu" : function(e) {
      e.stopEvent();
     },
     "rowcontextmenu" : function(grid, rowIndex, e) {
      e.stopEvent();
      rightMenu.showAt(e.getXY());
     }
    }
   });