您的位置:首页 > Web前端 > JavaScript

Extjs4之 grid中加入合计行(summary )

2015-07-03 10:38 573 查看
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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  extjs extjs4