I just noticed that if I define a column with defaults and assign it a renderer plus a style the style is applied to just the header, but the cell renderer is applied to each cell.
Is this expected behavior?
Here is my code:
Code:
Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email'],
data : {
'items' : [
{
'name' : 'Lisa',
"email" : "lisa@simpsons.com"},
{
'name' : 'Bart',
"email" : "bart@simpsons.com"},
{
'name' : 'Homer',
"email" : "home@simpsons.com"},
{
'name' : 'Marge',
"email" : "marge@simpsons.com"}
]
},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : {
defaults : {
flex : 1,
style : {
// why is this only effecting the header?
'font-weight' : 'bold',
'color' : 'red'
},
renderer : function (val) {
return '<span style="color:blue;">' + val + '</span>';
}
},
items : [
{
header : 'Name',
dataIndex : 'name'},
{
header : 'Email',
dataIndex : 'email'}
]
},
height : 200,
width : 400,
renderTo : Ext.getBody()
});?
And a demo on JSFiddle, http://jsfiddle.net/JamesFM/S37ud/ Note that while JSFiddle is using 4.0.7, I see the behavior on 4.1.0 as well.
EDIT: I have since corrected the JSFiddle to use 4.1.0.