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);

}

});