Class Ext.grid.Column

Required. The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's value.

Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. If a groupRenderer is not specified, the configured renderer will be called; if a renderer is also not specified the new value of the group field will be used.

The called function (either the groupRenderer or renderer) will be passed the following parameters:

The function should return a string value.

x-grid3-td-id

x-grid3-hd

.x-grid3-hd-row .x-grid3-td-id

For an alternative to specifying a renderer see xtype

Optional. A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered). This may be specified in either of three ways:

For information about the renderer function (passed parameters, etc.), see Ext.grid.ColumnModel.setRenderer. An example of specifying renderer function inline:

var companyColumn = {
   header: 'Company Name',
   dataIndex: 'company',
   renderer: function(value, metaData, record, rowIndex, colIndex, store) {
      // provide the logic depending on business rules
      // name of your own choosing to manipulate the cell depending upon
      // the data in the underlying Record object.
      if (value == 'whatever') {
          //metaData.css : String : A CSS class name to add to the TD element of the cell.
          //metaData.attr : String : An html attribute definition string to apply to
          //                         the data container element within the table
          //                         cell (e.g. 'style="color:red;"').
          metaData.css = 'name-of-css-class-you-will-define';
      }
      return value;
   }
}

Configuration properties for the specified xtype may be specified with the Column configuration properties, for example:

var grid = new Ext.grid.GridPanel({
    ...
    columns: [{
        header: 'Last Updated',
        dataIndex: 'lastChange',
        width: 85,
        sortable: true,
        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        xtype: 'datecolumn', // use xtype instead of renderer
        format: 'M/d/Y' // configuration property for Ext.grid.DateColumn
    }, {
        ...
    }]
});