在现代,您可以使用itemConfig来配置Ext.grid.Row
.
将下面的代码添加到Sencha Fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
itemConfig: {
listeners: {
painted: function (row) {
var record = row.getRecord();
var color = record.get('color');
row.setStyle('background: '+color)
//if (color == 'red')
//row.setStyle('background: red');
}
}
},
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120
},
{
text: 'Color',
dataIndex: 'color',
flex: 1
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
itemConfig 部分可以解决问题。
在@Gwynge 发表评论后,我创建了另一个示例,使用renderer
配置为每个单元格设置颜色:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
},
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Color',
dataIndex: 'color',
flex: 1,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
我希望这将有所帮助。