Class CQ.Ext.grid.TemplateColumn

Optional. An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.

Optional. Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The initial configuration may be dynamically altered using CQ.Ext.grid.ColumnModel.setEditable().

Optional. If the grid is being rendered by an CQ.Ext.grid.GroupingView, this option may be used to specify the text to display when there is an empty group value. Defaults to the CQ.Ext.grid.GroupingView.emptyGroupText.

Optional. If the grid is being rendered by an CQ.Ext.grid.GroupingView, this option may be used to specify the text with which to prefix the group field value in the group header line. See also groupRenderer and CQ.Ext.grid.GroupingView.showGroupName.

Optional. If the grid is being rendered by an CQ.Ext.grid.GroupingView, this option may be used to disable the header menu item to group by the column selected. Defaults to true, which enables the header menu group option. Set to false to disable (but still show) the group option in the header menu for the column. See also groupName.

Optional. true to initially hide this column. Defaults to false. A hidden column may be shown via the header row menu. If a column is never to be shown, simply do not include this column in the Column Model at all.

Optional. A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to create a CSS class name which is applied to all table cells (including headers) in that column (in this context the id does not need to be unique). The class name takes the form of

x-grid3-td-id

Header cells will also receive this class name, but will also have the class

x-grid3-hd

So, to target header cells, use CSS selectors such as:

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

The CQ.Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this unique identifier.

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:

If not specified, the default renderer uses the raw data value.

For information about the renderer function (passed parameters, etc.), see CQ.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;
   }
}

See also scope.

Optional. The scope (this reference) in which to execute the renderer. Defaults to the Column configuration object.

Optional. A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the header's HTML title attribute. Defaults to ''.

Optional. A String which references a predefined CQ.Ext.grid.Column subclass type which is preconfigured with an appropriate renderer to be easily configured into a ColumnModel. The predefined CQ.Ext.grid.Column subclass types are:

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

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