EXTJS4:在grid中加入合计行

EXTJS4:在grid中加入合计行


还记得在4.0.7之前的版本中,要在gridpanel中加一个合计栏是多么麻烦啊,4.0出现后,一句话就搞定

 

EXTJS4:在grid中加入合计行_第1张图片

直接copy官方的

 

Ext.onReady(function () { Ext.define('TestResult', { extend: 'Ext.data.Model', fields: ['student', { name: 'mark', type: 'int' }] }); Ext.create('Ext.grid.Panel', { width: 200, height: 140, renderTo: document.body, features: [{ ftype: 'summary' }], store: { model: 'TestResult', data: [{ student: 'Student 1', mark: 84 }, { student: 'Student 2', mark: 72 }, { student: 'Student 3', mark: 96 }, { student: 'Student 4', mark: 68 }] }, columns: [{ dataIndex: 'student', text: 'Name', summaryType: 'count', summaryRenderer: function (value, summaryData, dataIndex) { return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : ''); } }, { dataIndex: 'mark', text: 'Mark', summaryType: 'average' }] }); });

summaryType(统计类型)共有五种 count\sum\min\max\average

如果亲希望改变这一行的样式:

.x-grid-row-summary .x-grid-cell-inner { font-weight : bold; font-size : 14px; background-color : #ffd800;
}

你可能感兴趣的:(web前端)