我创建了以下ExtJS网格。
我想更改第二行行中所有单元格的文字颜色。
但是,我只能找到如何更改所有行中所有单元格的颜色,包括标题文字,如下所示:
var myData = [
[4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, 3.0, '2010-11-17 08:31:12'],
[16, 'Computer2-this row should be red', 0.28, 2.7, '2010-11-14 08:31:12'],
[5, 'Network1', 0.02, 2.5, '2010-11-12 08:31:12'],
[1, 'Network2', 0.01, 4.1, '2010-11-11 08:31:12'],
[12, 'Other', 0.42, 5.0, '2010-11-04 08:31:12']
];
var myReader = new Ext.data.ArrayReader({}, [{
name: 'id',
type: 'int'
}, {
name: 'object',
type: 'object'
}, {
name: 'status',
type: 'float'
}, {
name: 'rank',
type: 'float'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}]);
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'color:red', //makes ALL text in grid red, I only want one row to be red
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [{
header: 'ID',
width: 50,
sortable: true,
dataIndex: 'id',
hidden: false
}, {
header: 'Object',
width: 120,
sortable: true,
dataIndex: 'object',
renderer: columnWrap
}, {
header: 'Status',
width: 90,
sortable: true,
dataIndex: 'status'
}, {
header: 'Rank',
width: 90,
sortable: true,
dataIndex: 'rank'
}, {
header: 'Last Updated',
width: 120,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
dataIndex: 'lastChange'
}],
viewConfig: {
forceFit: true
},
title: 'Computer Information',
width: 500,
autoHeight: true,
frame: true,
listeners: {
'rowdblclick': function(grid, index, rec){
var id = grid.getSelectionModel().getSelected().json[0];
go_to_page('edit_item', 'id=' + id);
}
}
});
如何更改第二行中单元格的文字颜色?
答案 0 :(得分:8)
您想要覆盖getRowClass
,它会传递到GridPanel的viewConfig
。 GridPanel的API文档中提供了一个示例:
viewConfig: {
forceFit: true,
// Return CSS class to apply to rows depending upon data values
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
GridView
包含该方法,因此请查看API以获取更多信息:
getRowClass( Record record, Number index, Object rowParams, Store store )
覆盖此功能以应用自定义 渲染过程中的CSS类到行。 您还可以提供自定义参数 到当前的行模板 用于自定义渲染方式的行 使用rowParams参数。这个 函数应该返回CSS类 name(或空字符串''表示无) 这将被添加到行的 包裹div。申请多个班级 名字,只需返回它们 字符串中以空格分隔 (例如,'我的班级另一班')。
您可以使用index
参数将CSS应用于某一行。
答案 1 :(得分:4)
不确定这是否有帮助,但你可以试试。我在本地试过,它确实改变了第二行中所有字符的颜色。
将侦听器添加到网格中:
listeners:{
viewready: function(g){
g.getView().getRow(1).style.color="#f30";
}
}
“当viewready
时,您可以使用getRow()
中的GridView
方法获取行的div。之后是正常的分配颜色的Javascript(或添加额外的类,如果您需要)
干杯
修改强>
如果您的商店远程检索数据,我意识到它无效。视图已准备就绪,但数据尚未就绪。这种方法会失败。