Properties Methods Events Config Options Direct Link

# Class Ext.grid.Column

Package: | Ext.grid
Defined In: | Column.js
Class: | Column
Subclasses: | BooleanColumn, DateColumn, NumberColumn, TemplateColumn
Extends: | Object

This class encapsulates column configuration data to be used in the initialization of a ColumnModel.

While subclasses are provided to render data in different ways, this class renders a passed data field unchanged and is usually used for textual columns.

## 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 `' '`. | 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

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

This class has no public events.