View Full Version : Ext.grid.ColumnModel: Default renderer overwrites column renderer.

25 Mar 2011, 4:49 AM

I encounter following behavior:

When I specify a renderer in the defaults section of Ext.grid.ColumnModel this renderer overwrites or is used instead of the renderer specified on Column level. The default renderer is even causing the date not being formatted correctly and that is formatted using an xtype and format.

I am using a custom renderer to place <span></span> tags around the value inside the grid cell so I can easily specify a css class to show the value of the grid in a specific color in the group header when grouping.

- the first column shows the row numbers,
- the second column, sm, is a CheckboxSelectionModel() representation,
- the third column renderer will add a css class to show a background image,
- the fourth column is an editable date field.

The ColumnModel code (Just the first 4 column configs are pasted here):

var cm = new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true,
renderer: function(value){
return '<span>'+value+'</span>'
columns: [
new ExtJs.grid.RowNumberer(),
header: '&#160;',
tooltip: '{STOCK_INDICATOR}',
width: 50,
resizable: false,
hideable: false,
groupName: '{IS_STOCK_ITEM}',
dataIndex: 'stockIndicator',
renderer: function(value, metaData){
switch (value){
case 'S':
metaData.css = 'stock-item';
return '<span>{YES}</span>'
case 'NS':
metaData.css = 'no-stock-item';
return '<span>{NO}</span>'
{header: '{DATE_NEEDED}', dataIndex: 'dateNeeded', xtype: 'datecolumn', format: 'd-M-Y',
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: todayDate(),

The code for showing the group headers:

view: new ExtJs.grid.GroupingView({
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "{RECORDS}" : "{RECORD}"]})'

The css code:

.stock-item {
background: transparent url("images/s.png") no-repeat 50% 50%;
.no-stock-item {
background: transparent url("images/ns.png") no-repeat 50% 50%;
.no-stock-item span, .stock-item span {
color: transparent;
.x-grid-group-hd div.x-grid-group-title span {
color: #ff0000;

I can't find anywhere what the default behavior is when a default renderer is specified together with a renderer on column level. My thought would be that the default renderer would only be applied on columns that have no specific renderer specified but this does not seem to be the case.

Any suggestions how I can solve this without the need of specifying the default renderer on every column in the ColumnModel?

Thanks in advance!

A preview image to show why I am using the <span></span> tags, coloring the value in red in the group title.