ExtJS实现完美Grid(2)--分组统计

我们在《ExtJS实现完美Grid(1)》的基础改造一下，让它能够实现分页面统计功能

首先我们在页面要引入分组插件，因为ext-all.js不包括分组功能，可以在ext下载的examples里找到，引入如下：

    <script type="text/javascript" src="../ext/GroupSummary.js"></script>
    <script type="text/javascript" src="../ext/RowExpander.js"></script>

加在引入ext-all.js下，自定义js上边

然后我们修改js文件

1、修改列定义

var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),{

   header : '姓名',
   align:'center',
   dataIndex : 'name',
   width : 80,
   summaryType: 'count', //分组类型，还有:average,sum,max,totalCost
   summaryRenderer: function(v, params, data){
                    return ((v == 0 || v > 1) ? v +' 位员工' : '1 位员工');
        },
   editor:new Ext.grid.GridEditor(new Ext.form.TextField({
    allowBlank:false,
    emptyText:'不能为空!',
    regex:/^[\u4E00-\u9FA5]+$/, //正则表达式验证，只能输入汉字
    regexText:'请输入汉字!',
    bodyStyle:'height:100%'
   
   }))
},{
   header : '性别',
   align:'center',
   dataIndex : 'sex',
   width : 50,
   summaryRenderer: function(v, params, data){
            return '—';
        },
   editor:new Ext.grid.GridEditor(sexSelect)
}, {
   header : '出生日期',
   align:'center',
   dataIndex : 'birthday',
   width : 100,
   editor:new Ext.grid.GridEditor(new Ext.form.DateField({
    format:'Y-m-d'
   }
   )),
   summaryRenderer: function(v, params, data){
            return '—';
        },
   renderer:function(value){
    return Ext.util.Format.date(value,'Y-m-d');
   }
}, {
   header : '职位',
   align:'center',
   dataIndex : 'office',
   width : 100,
   summaryRenderer: function(v, params, data){
            return '—';
        },
   editor:new Ext.grid.GridEditor(new Ext.form.TextField({
    allowBlank:false,
    emptyText:'不能为空!'
   
   }))
}, {
   header : '薪水',
   align:'center',
   dataIndex : 'salary',
   width : 100,
   renderer:Ext.util.Format.usMoney,
   summaryType:'sum',
   summaryRenderer: Ext.util.Format.usMoney,
   editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
    allowBlank:false,
    emptyText:'不能为空!',
    decimalPrecision:2 //设置小数位的精度
   }))
}, {
   header : '电话',
   align:'center',
   dataIndex : 'tel',
   width : 100,
   summaryRenderer: function(v, params, data){
            return '—';
        }
}, {
   header : 'QQ',
   align:'center',
   dataIndex : 'QQ',
   width : 100,
   summaryRenderer: function(v, params, data){
            return '—';
        }
}, {
   header : '邮箱',
   align:'center',
   dataIndex : 'email',
   width : 150,
   summaryRenderer: function(v, params, data){
            return '—';
        }
}, {
   header : '地址',
   align:'center',
   dataIndex : 'address',
   width : 150,
   summaryRenderer: function(v, params, data){
            return '—';
        }
},{
   id:'action',
   header : '操作',
   align:'center',
   dataIndex : 'action'
}
]);

注意列定义中添加了summaryType和summaryRenderer两个属性
summaryType是定义统计的类型，统计类型主要有求平均average,求和sum,最大值max,累加个数count等，也可以自定义统计类型。

summaryRenderer是统计的显示形式，如此name列

summaryRenderer: function(v, params, data){
                    return ((v == 0 || v > 1) ? v +' 位员工' : '1 位员工');
},

2、修改store定义：

var store = new Ext.data.GroupingStore({   
         proxy : new Ext.data.HttpProxy({
     url :gridUrl,
     method:'post'
    }),
         reader:new Ext.data.JsonReader({
             totalProperty:'totalCount',   //指定分页控件属性用
             root:'root'
         },Person),
         groupField:'sex', //定义默认分组列
    sortInfo:{field:'name',direction:'ASC'} //定义排序列，此属性必须定义
});

3、添加分组插件，修改gridPanel定义

    //定义分组插件
    var summary = new Ext.grid.GroupSummary();
// 表格组装
var grid = new Ext.grid.EditorGridPanel({
   el : 'grid',
   store : store,
   cm : cm,
   region:'center',
     bodyStyle:'width:100%;height:100%',
     autoScroll:true,
     layout:'fit',
     autoExpandColumn:'action',
     view:new Ext.grid.GroupingView(), //添加分组视图
     plugins: summary,   //添加分组插件
   bbar:new Ext.PagingToolbar({
    pageSize : limit,
    store : store,
    displayInfo : true,
    displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
    emptyMsg : "没有记录"
   })
});

这样分组功能就实现了，让我们看一下效果：