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, which are as follows:

• value: This is the data value for the current cell.

• metaData: This is a collection of metadata related to the current cell, such as tdCls, tdAttr, and tdStyle. This parameter is useful for changing or...