此组件可以对表格进行分组显示，并且按照条件对指定字段做统计。效果图如下：

下面展示一个案例的代码

<w:editDataGrid  id="editorGrid" height="350">
              <w:groupSummaryPlug groupField="sex" sortField="age" sortDirection="incoming"></w:groupSummaryPlug>
              <w:outputColumn id="name" header="名称">
                  <w:textField id="nameEdit" allowBlank="false" />
               </w:outputColumn>
               <w:outputColumn id="address" header="地址">
                  <w:textField id="addressEdit" allowBlank="false" />
               </w:outputColumn>
               <w:outputColumn id="sex" header="性别">
                  <w:textField id="sexEdit" allowBlank="false" />
               </w:outputColumn>
               <w:outputColumn id="age" header="年龄" summaryType="sum" >
                  <w:numberField id="ageEdit"></w:numberField>
               </w:outputColumn>
               <w:outputColumn id="incoming" header="收入"  summaryType="sum">
                  <w:numberField id="incomingEdit"></w:numberField>
               </w:outputColumn>
               <w:outputColumn id="outcoming" header="支出"  summaryType="totalOutcoming">
                  <w:textField id="outcomingEdit" allowBlank="false"/> <!-- 此处为textField，则修改值之后不能正确相加，只会字符串连接 -->
               </w:outputColumn>
</w:editDataGrid>

统计组件主要面对的是数据字段，而且对于每个outputColumn，必须设置对应的处理函数，即设置summaryType属性，预置了sum、max、min等函数，如果觉得不够或者想处理特殊情况的，可以自己写

函数实现，原理类似于renderer属性，上面代码的totalOutcoming即是自定义的处理函数，具体实现请看下面代码，返回的结果是原来数据乘以10之后的结果。

Ext.ux.grid.GroupSummary.Calculations['totalOutcoming'] = function(v, record, field){
        return v + (record.data.outcoming * 10);
};

这个组件还有一个特性就是可以动态改变数据并动态计算结果，而这些改变都不会对数据库造成影响，适合一些需要预出账的案例使用

查看更多案例请进入官网示例《groupSummaryPlug》