O'Reilly logo

Learning Ext JS - Fourth Edition by Armando Gonzalez, Crysfel Villa, Carlos A. Méndez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Column renderers

Column renderers give us the ability to customize the behavior and rendering of the cells inside a grid's panel. A renderer is tied to a particular column, and will run for each cell that it has to display/create in that column.

In the Ext JS library, many renderers are already set inside the Ext.util.Format class, such as Ext.util.Format.dateRenderer, Ext.util.Format.uppercase, and many more functions. To define a renderer in a column, we must add the renderer property, as shown in the following code:

{
  xtype: 'datecolumn',
  dataIndex: 'clientSince',
  text: 'Client Since',
  format: 'M-d-Y H:i',
  renderer: function(value, metaData, record, rowIndex, colIndex, store, view ){
    // Our code here....
  }
}

As we see, the function has some parameters, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required