extjs---分组表格groupGrid

Ext.grid.GroupingGrid分组表格就是在普通表格的基础上，根据某一列的数据将表格中的数据分组显示的表格的控件。

 var cm = [
     {header:'编号',dataIndex:'id',name:'id'},
    {header:'性别',dataIndex:'sex',name:'sex'},
    {header:'名称',dataIndex:'name',name:'name' },
    {header:'描述',dataIndex:'descn',name:'descn'}
   ];
  var data = [
     ['1','male','name1','descn1'],
     ['2','female','name2','descn2'],
     ['3','male','name3','descn3'],
     ['4','female','name4','descn4'],
     ['5','male','name5','descn5'],
     ['6','female','name6','descn6']
    ];  
  var reader = new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ]); 
  
  
   var store = new Ext.data.GroupingStore({
    reader:reader,
    data : data,
    groupField:'sex',
    sortInfo:{field:'id',direction:'ASC'}
   });

    var grid = new Ext.grid.GridPanel({
     autoHeight:true,
     width:300,
     store:store,
     renderTo:'grid',
    columns:cm,
    view: new Ext.grid.GroupingView()
    });

============================================

图如下显示 ：

=============================================

添加四个按钮，分别是展开、关闭、toggle（展开关闭），toggle one （展开or关闭一组）

html:

<button id="expand">expand</button>
 <button id="collapse">collapse</button>
 <button id="toggle">toggle</button>
 <button id="one">toggle one</button>

js:

Ext.get('expand').on('click',function(){
   grid.getView().expandAllGroups();
  });
  Ext.get('collapse').on('click',function(){
   grid.getView().collapseAllGroups();
  });
  Ext.get('toggle').on('click',function(){
   grid.getView().toggleAllGroups();
  });
  Ext.get('one').on('click',function(){
   var groupId = grid.getView().getGroupId('female'); --- 通过得到表格视图，进而取得一组的id （groupId）
   grid.getView().toggleGroup(groupId);
  });

如下图所示：

=============================================

==============================================