Extjs的grid总计实现

注意：前台页面相加计算的列，后台传的值必须是int、double或float（数值型）

Ext.define('person.view.tongji.Salary', {

    extend: 'Ext.panel.Panel',
    layout: 'border',
    border: false,
    margins: '0 0 0 0',
    initComponent: function() {
        var me = this;
        var store = Ext.create('Ext.data.Store', { // 定义数据源
            autoLoad: true,
            fields: ["pkid",'ksname','type1','type2','note','salary','kou'],
            pageSize : 30, // 设置分页大小
            proxy: {
                type: 'ajax',
                url: 'kaoqin/getSalaryTongJiList.do',
                // 请求的服务器地址
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'totalCount'
                }
            },
            listeners: {
                load: function() {
                },
                beforeload: function(store) {
                var yuec=Ext.getCmp('tongji_salary_yuec').getValue()+"";
                var yuez=Ext.getCmp('tongji_salary_yuez').getValue()+"";
                    Ext.apply(store.proxy.extraParams,{
                        datec:Ext.getCmp('tongji_salary_nianc').getValue()+'/'+(yuec.length==1?'0'+yuec:yuec),
                        datez:Ext.getCmp('tongji_salary_nianz').getValue()+'/'+(yuez.length==1?'0'+yuez:yuez)
                    });
                }
            }
        });
        function taskInfo(value, cellmeta, record, rowIndex, columnIndex,store){
  cellmeta.tdAttr='data-qtip="'+value+'"';  //列加提示
  if(record.data.pkid==0){
  return "<span style='color:red;cursor: pointer;'>"+value+"</span>";  
  }else{
  return value;
  }
  }
        var grid = Ext.create('Ext.grid.Panel', {
            region: 'center',
            store: store,
            border: false,
            selType:'rowmodel',
            features: [{
                ftype: 'summary'
            }],
            margins: '0 0 0 0',
            enableColumnHide: false,
            columns: [Ext.create('Ext.grid.RowNumberer', {
                text: "序号",
                align: 'center',
                flex: 1,
                summaryRenderer:function(value, summaryData, dataIndex){
                return "<font color='red' size='2'>合计</font>";
                }
            }),  {
                text: "所在科室",
                flex: 2,
                align: 'center',
                sortable: true,
                renderer:taskInfo,
                dataIndex: 'ksname',
            summaryRenderer: function (value, summaryData, dataIndex) {
        return "<font color='red' size='2'>--</font>";
        }
            },{
                text: "二级人数",
                flex: 2,
                align: 'center',
                sortable: true
                ,renderer:taskInfo,
                dataIndex: 'type1',
                summaryType: 'sum',
summaryRenderer: function (value, summaryData, dataIndex) {
        return "<font color='red' size='2'>"+parseInt(value)+"</font>";
        }


            },{
                text: "三级人数",
                flex: 2,
                align: 'center',
                sortable: true,
                summaryType: 'sum',
                dataIndex: 'type2',
                renderer:taskInfo,
summaryRenderer: function (value, summaryData, dataIndex) {
        return "<font color='red' size='2'>"+parseInt(value)+"</font>";
        }
            },{
                text: "实发金额总数（元）",
                flex: 2,
                align: 'center',
                sortable: true,
                summaryType: 'sum',
                dataIndex: 'salary',
                renderer:taskInfo,
summaryRenderer: function (value, summaryData, dataIndex) {

return "<font color='red' size='2'>"+parseInt(value).toFixed(2)+"</font>";
}
            },{
                text: "扣罚金额总数（元）",
                flex: 2,
                align: 'center',
                sortable: true,
                summaryType: 'sum',
                dataIndex: 'kou',
                renderer:taskInfo,
summaryRenderer: function (value, summaryData, dataIndex) {
return "<font color='red' size='2'>"+parseInt(value).toFixed(2)+"</font>";
        }
            },{
                text: "备注",
                flex: 2,
                align: 'center',
                sortable: true,
                dataIndex: 'note',
                renderer:function(v,cellmeta){
            if(v&&v.length>15){
              cellmeta.tdAttr = 'data-qtip="'
            + v
            + '"'; // 列加提示
               }
               return v;
           },
            summaryRenderer: function (value, summaryData, dataIndex) {
        return "<font color='red' size='2'>--</font>";
        }
            }],
            columnLines: true,
            dockedItems: [{ // 工具栏
                xtype: 'toolbar',
                items: [
// '->',
{
xtype:'fieldcontainer',
layout:'hbox',
fieldLabel:'日期从',
margin:'0 5 0 5',
labelWidth:40,
items:[{
xtype : 'combo',
width:55,
store:[new Date().getFullYear()-2,new Date().getFullYear()-1,new Date().getFullYear()],
editable:false,
                   triggerAction : 'all',
queryMode : 'local',
margin : '0 5 0 5',
id:'tongji_salary_nianc',
value:new Date().getFullYear() 
},
{
xtype : 'displayfield',
value : '年'
}, {
xtype : 'combo',
width:40,
store:[1,2,3,4,5,6,7,8,9,10,11,12],
editable:false,
                   triggerAction : 'all',
queryMode : 'local',
margin : '0 5 0 5',
id:'tongji_salary_yuec',
value: new Date().getMonth()
}, {
xtype : 'displayfield',
margin : '0 5 0 5',
value : '月'
}]
},
{
xtype:'fieldcontainer',
layout:'hbox',
fieldLabel:'至',
margin:'0 5 0 5',
labelWidth:40,
items:[{
xtype : 'combo',
width:55,
store:[new Date().getFullYear()-2,new Date().getFullYear()-1,new Date().getFullYear()],
editable:false,
                   triggerAction : 'all',
queryMode : 'local',
margin : '0 5 0 5',
id:'tongji_salary_nianz',
value:new Date().getFullYear() 
},
{
xtype : 'displayfield',
value : '年'
}, {
xtype : 'combo',
width:40,
store:[1,2,3,4,5,6,7,8,9,10,11,12],
editable:false,
                   triggerAction : 'all',
queryMode : 'local',
margin : '0 5 0 5',
id:'tongji_salary_yuez',
value: new Date().getMonth()+1
}, {
xtype : 'displayfield',
margin : '0 5 0 5',
value : '月'
}]
}
,{
xtype:'button',
text : '查询',
width:50,
margin:'0 5 0 5',
icon:'images/search.png',
handler : function() {
Ext.getCmp('tongji_salary_pagebar').moveFirst();
store.load();
}
},
{
text : '重置',
xtype:'button',
width:50,
icon:'images/cz.png',
handler : function() {
Ext.getCmp('tongji_salary_nian').setValue(new Date().getFullYear());
Ext.getCmp('tongji_salary_yue').setValue(new Date().getMonth()+1);
}
},'-',{
       text: "导出汇总表",
       tooltip: '导出奖金汇总表详细信息',
       icon: 'images/export.png',
       handler: function() {
        var yuec=Ext.getCmp('tongji_salary_yuec').getValue()+"";
                var yuez=Ext.getCmp('tongji_salary_yuez').getValue()+"";
                   var datec=Ext.getCmp('tongji_salary_nianc').getValue()+'/'+(yuec.length==1?'0'+yuec:yuec);
                   var datez=Ext.getCmp('tongji_salary_nianz').getValue()+'/'+(yuez.length==1?'0'+yuez:yuez);
                   window.open("tongji/exportSalaryInfo.do?datec="+datec+"&datez="+datez).focus();
       }
   }]
            }],
            border: false,
           // frame: true,
            header:false,
            iconCls: 'icon-grid',
            bbar: [{ // 分页工具条
                xtype: 'pagingtoolbar',
                id: 'tongji_salary_pagebar',
                store: store,
                // 这里需要指定与表格相同的store
                displayInfo: true
            }]
        });
        me.items = [grid];
        me.callParent(arguments);
    }
});