Properties Methods Events Config Options Direct Link

    Column
      TemplateColumn

# Class Ext.grid.TemplateColumn

Package: | Ext.grid
Defined In: | Column.js
Class: | TemplateColumn
Extends: | Column

A Column definition class which renders a value by processing a Record's data using a configured XTemplate. See the xtype config option of Ext.grid.Column for more details.

## Config Options

Config Options | Defined By
--- | ---
| align : String Optional. Set the CSS text-align property of the column. Defaults to undefined. | Column
| css : String Optional. An inline style definition string which is applied to all table cells in the column (excluding headers). De... Optional. An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined. | Column
| dataIndex : String Required. The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the colu... 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. | Column
| editable : Boolean Optional. Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column... 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 Ext.grid.ColumnModel.setEditable(). | Column
| editor : Ext.form.Field Optional. The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See edita... Optional. The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See `editable` also. | Column
| emptyGroupText : String Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text to d... Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text to display when there is an empty group value. Defaults to the Ext.grid.GroupingView.emptyGroupText. | Column
| fixed : Boolean Optional. `true` if the column width cannot be changed. Defaults to `false`. | Column
| groupName : String Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text with... Optional. If the grid is being rendered by an 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 Ext.grid.GroupingView.showGroupName. | Column
| groupRenderer : Function Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function ... 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: v : Object The new value of the group field. unused : undefined Unused parameter. r : Ext.data.Record The Record providing the data for the row which caused group change. rowIndex : Number The row index of the Record which caused group change. colIndex : Number The column index of the group field. ds : Ext.data.Store The Store which is providing the data Model. The function should return a string value. | Column
| groupable : Boolean Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to disable the header me... Optional. If the grid is being rendered by an 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`. | Column
| header : String Optional. The header text to be used as innerHTML (html tags are accepted) to display in the Grid view. Note: to hav... Optional. The header text to be used as innerHTML (html tags are accepted) to display in the Grid view. Note: to have a clickable header with no text displayed use `'&#160;'`. | Column
| hidden : Boolean Optional. true to initially hide this column. Defaults to false. A hidden column may be shown via the header row menu... 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. | Column
| hideable : Boolean Optional. Specify as false to prevent the user from hiding this column (defaults to true). To disallow column hiding... Optional. Specify as `false` to prevent the user from hiding this column (defaults to true). To disallow column hiding globally for all columns in the grid, use Ext.grid.GridPanel.enableColumnHide instead. | Column
| id : String Optional. A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to ... 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 Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this unique identifier. | Column
| menuDisabled : Boolean Optional. `true` to disable the column menu. Defaults to `false`. | Column
- | renderer : Mixed For an alternative to specifying a renderer see xtype Optional. A renderer is an 'interceptor' method which can be us... 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: A renderer function used to return HTML markup for a cell given the cell's data value. A string which references a property name of the Ext.util.Format class which provides a renderer function. An object specifying both the renderer function, and its execution scope (`this` reference) e.g.:
      {
          fn: this.gridRenderer,
          scope: this
      }
If not specified, the default renderer uses the raw data value. 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;
       }
    }
See also scope. | Column
| resizable : Boolean Optional. `false` to disable column resizing. Defaults to `true`. | Column
| scope : Object Optional. The scope (`this` reference) in which to execute the renderer. Defaults to the Column configuration object. | Column
| sortable : Boolean Optional. true if sorting is to be allowed on this column. Defaults to the value of the Ext.grid.ColumnModel.defaultS... Optional. `true` if sorting is to be allowed on this column. Defaults to the value of the `Ext.grid.ColumnModel.defaultSortable` property. Whether local/remote sorting is used is specified in `Ext.data.Store.remoteSort`. | Column
| tooltip : String Optional. A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as ... 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 ''. | Column
| tpl : String/XTemplate An XTemplate, or an XTemplate definition string to use to process a Record's data to produce a column's rendered valu... An XTemplate, or an XTemplate definition string to use to process a Record's data to produce a column's rendered value. | TemplateColumn
| width : Number Optional. The initial width in pixels of the column. The width of each column can also be affected if any of the foll... Optional. The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured: Ext.grid.GridPanel.`autoExpandColumn` Ext.grid.GridView.`forceFit` By specifying `forceFit:true`, non-fixed width columns will be re-proportioned (based on the relative initial widths) to fill the width of the grid so that no horizontal scrollbar is shown. Ext.grid.GridView.`autoFill` Ext.grid.GridPanel.`minColumnWidth` Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.`scrollOffset` can be modified to reduce or eliminate the reserved offset. | Column
| xtype : String Optional. A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropr... Optional. A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate `renderer` to be easily configured into a ColumnModel. The predefined Ext.grid.Column subclass types are: `gridcolumn` : Ext.grid.Column (Default) `booleancolumn` : Ext.grid.BooleanColumn `numbercolumn` : Ext.grid.NumberColumn `datecolumn` : Ext.grid.DateColumn `templatecolumn` : Ext.grid.TemplateColumn 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
        }, {
            ...
        }]
    });
| Column

## Public Properties

Property | Defined By
--- | ---
| renderer : Function Optional. A function which returns displayable data when passed the following parameters: <div class="mdetail-params"... Optional. A function which returns displayable data when passed the following parameters: value : Object The data value for the cell. metadata : Object An object in which you may set the following attributes: css : String A CSS class name to add to the cell's TD element. attr : String An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"'). record : Ext.data.record The Ext.data.Record from which the data was extracted. rowIndex : Number Row index colIndex : Number Column index store : Ext.data.Store The Ext.data.Store object from which the Record was extracted. | Column

## Public Methods

Method | Defined By
--- | ---
| getCellEditor( `Number rowIndex` ) : Ext.Editor Returns the editor defined for this column that was created to wrap the Field used to edit the cell. Returns the editor defined for this column that was created to wrap the Field used to edit the cell. Parameters: `rowIndex` : Number The row index Returns: `Ext.Editor` | Column
| setEditor( `Ext.Editor/Ext.form.Field editor` ) : void Sets a new editor for this column. Sets a new editor for this column. Parameters: `editor` : Ext.Editor/Ext.form.Field The editor to set Returns: void | Column

## Public Events

Event | Defined By
--- | ---
| click : ( `Column this`, `Grid The`, `Number rowIndex`, `Ext.EventObject e` ) Fires when this Column is clicked. Fires when this Column is clicked. Listeners will be called with the following arguments: `this` : Column `The` : Grid owning GridPanel `rowIndex` : Number `e` : Ext.EventObject | Column
| contextmenu : ( `Column this`, `Grid The`, `Number rowIndex`, `Ext.EventObject e` ) Fires when this Column is right clicked. Fires when this Column is right clicked. Listeners will be called with the following arguments: `this` : Column `The` : Grid owning GridPanel `rowIndex` : Number `e` : Ext.EventObject | Column
| dblclick : ( `Column this`, `Grid The`, `Number rowIndex`, `Ext.EventObject e` ) Fires when this Column is double clicked. Fires when this Column is double clicked. Listeners will be called with the following arguments: `this` : Column `The` : Grid owning GridPanel `rowIndex` : Number `e` : Ext.EventObject | Column
| mousedown : ( `Column this`, `Grid The`, `Number rowIndex`, `Ext.EventObject e` ) Fires when this Column receives a mousedown event. Fires when this Column receives a mousedown event. Listeners will be called with the following arguments: `this` : Column `The` : Grid owning GridPanel `rowIndex` : Number `e` : Ext.EventObject | Column