我想更改网格摘要行的字体和背景颜色。我尝试将摘要行改为:
var summaryRow = grid.view.el.down('tr.x-grid-row-summary');
基于summaryRow我可以设置样式。但是我将summaryRow的值设为 null 。任何人都可以指出我正确的方向或者我错过了什么?感谢任何帮助。谢谢
答案 0 :(得分:2)
记录的方法是Summary Renderer,汇总渲染器的最佳方法是tdCls或tdAttr属性:
text: 'Allocation %',
xtype: 'numbercolumn',
format: '00.00%',
dataIndex: 'allocationAmount',
summaryType: 'sum',
summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) {
if (value > 100)
{
summaryData.tdCls = 'text-warning-high'
} else if (value === 100)
{
summaryData.tdCls = 'text-successful';
} else {
summaryData.tdCls = 'text-warning-low';
}
return Ext.String.format('Total: {0}%', value);
},
你也可以像这样使用tdAttr版本:
summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) {
if (value > 100)
{
summaryData.tdAttr = 'style="color: #ff0000"';
} else if (value === 100)
{
summaryData.tdAttr = 'style="color: green;"';
} else {
summaryData.tdAttr = 'style="color: yellow;"';
}
return Ext.String.format('Total: {0}%', value);
},
注意第一个是使用css类,所以你需要在css文件中定义适当的css类:D
答案 1 :(得分:1)
var summaryRow = grid.getView().getFeature(0);
styleObj = {
'background-color': '#c5c5c5'
};
summaryRow.view.el.setStyle(styleObj);
答案 2 :(得分:0)
您可以使用grid列中的summaryRenderer函数来显示特定样式的行。
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 "<font color='red'>"+value+"<font>";
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}]
});
答案 3 :(得分:0)
或者我们可以在特定页面中使用CSS。
<style>
.x-grid-row-summary .x-grid-cell{
background-color: #f00 !important;
font-size: x-large !important;
}
</style>