Properties Methods Events Config Options Direct Link

    Observable
      ColumnModel

# Class Ext.grid.ColumnModel

Package: | Ext.grid
Defined In: | ColumnModel.js
Class: | ColumnModel
Subclasses: | PropertyColumnModel
Extends: | Observable

This is the default implementation of a ColumnModel used by the Grid. This class is initialized with an Array of column config objects.
An individual column's config object defines the header string, the Ext.data.Record field the column draws its data from, an optional rendering function to provide customized data formatting, and the ability to apply a CSS class to all cells in a column through its id config option.
Usage:

    var colModel = new Ext.grid.ColumnModel([
        { header: "Ticker", width: 60, sortable: true},
        { header: "Company Name", width: 150, sortable: true},
        { header: "Market Cap.", width: 100, sortable: true},
        { header: "$ Sales", width: 100, sortable: true, renderer: money},
        { header: "Employees", width: 100, sortable: true, resizable: false}
     ]);

The config options defined by this class are options which may appear in each individual column definition. In order to use configuration options from the superclass, specify the column configuration Array in the `columns` config property. eg:

    var colModel = new Ext.grid.ColumnModel({
        listeners: {
            widthchange: function(cm, colIndex, width) {
                saveConfig(colIndex, width);
            }
        },
        columns: [
            { header: "Ticker", width: 60, sortable: true},
            { header: "Company Name", width: 150, sortable: true},
            { header: "Market Cap.", width: 100, sortable: true},
            { header: "$ Sales", width: 100, sortable: true, renderer: money},
            { header: "Employees", width: 100, sortable: true, resizable: false}
         ]
    });

## Config Options

Config Options | Defined By
--- | ---
| align : String (optional) Set the CSS text-align property of the column. Defaults to undefined. | ColumnModel
| css : String (optional) Set custom CSS for all table cells in the column (excluding headers). Defaults to undefined. | ColumnModel
| dataIndex : String (optional) The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the col... (optional) 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. If not specified, the column's index is used as an index into the Record's data Array. | ColumnModel
| editor : Ext.form.Field (optional) The Ext.form.Field to use when editing values in this column if editing is supported by the grid. | ColumnModel
| fixed : Boolean (optional) True if the column width cannot be changed. Defaults to false. | ColumnModel
| header : String The header text to display in the Grid view. | ColumnModel
| hidden : Boolean (optional) True to hide the column. Defaults to false. | ColumnModel
| 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. | ColumnModel
| id : String (optional) Defaults to the column's initial ordinal position. A name which identifies this column. The id is used to ... (optional) Defaults to the column's initial ordinal position. A name which identifies this column. The id is used to create a CSS class name which is applied to all table cells (including headers) in that column. The class name takes the form of
    x-grid3-td-id
Header cells will also recieve 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.x-grid3-td-id
The Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this identifier. | ColumnModel
| listeners : Object (optional) A config object containing one or more event handlers to be added to this object during initialization. Th... (optional) A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. | Observable
| menuDisabled : Boolean (optional) True to disable the column menu. Defaults to false. | ColumnModel
| renderer : Function (optional) A function used to generate HTML markup for a cell given the cell's data value. See setRenderer. If not sp... (optional) A function used to generate HTML markup for a cell given the cell's data value. See setRenderer. If not specified, the default renderer uses the raw data value. | ColumnModel
| resizable : Boolean (optional) False to disable column resizing. Defaults to true. | ColumnModel
| sortable : Boolean (optional) True if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Wh... (optional) True if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether local/remote sorting is used is specified in Ext.data.Store.remoteSort. | ColumnModel
| 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 ''. | ColumnModel
| width : Number (optional) The initial width in pixels of the column. This is ignored if the Grid's view is configured with forceFit ... (optional) The initial width in pixels of the column. This is ignored if the Grid's view is configured with forceFit true. | ColumnModel

## Public Properties

Property | Defined By
--- | ---
| config : Array The column configuration Array passed into the constructor. | ColumnModel
| defaultSortable : Boolean Default sortable of columns which have no sortable specified (defaults to false) | ColumnModel
| defaultWidth : Number The width of columns which have no width specified (defaults to 100) | ColumnModel

## Public Methods

Method | Defined By
--- | ---
| ColumnModel( `Object config` ) Parameters: `config` : Object An Array of column config objects. See this class's config objects for details. Returns: `` | ColumnModel
| addEvents( `Object object` ) : void Used to define events on this Observable Used to define events on this Observable Parameters: `object` : Object The object with the events defined Returns: `void` | Observable
- | addListener( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void Appends an event handler to this component Appends an event handler to this component Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. `options` : Object (optional) An object containing handler configuration properties. This may contain any of the following properties: scope : Object The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. delay : Number The number of milliseconds to delay the invocation of the handler after the event fires. single : Boolean True to add a handler to handle just the next firing of the event, and then remove itself. buffer : Number Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place. target : Observable Only call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable. Combining Options Using the options argument, it is possible to combine different types of listeners: A delayed, one-time listener.
      myDataView.on('click', this.onClick, this, {
          single: true,
          delay: 100
      });
  Attaching multiple handlers in 1 call The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.
      myGridPanel.on({
          'click' : {
              fn: this.onClick,
              scope: this,
              delay: 100
          },
          'mouseover' : {
              fn: this.onMouseOver,
              scope: this
          },
          'mouseout' : {
              fn: this.onMouseOut,
              scope: this
          }
      });
  Or a shorthand syntax:
      myGridPanel.on({
          'click' : this.onClick,
          'mouseover' : this.onMouseOver,
          'mouseout' : this.onMouseOut,
           scope: this
      });
Returns: `void` | Observable
| destroy() : void Destroys this the column model by purging any event listeners, and removing any editors. Destroys this the column model by purging any event listeners, and removing any editors. Parameters: None. Returns: `void` | ColumnModel
| findColumnIndex( `String col` ) : Number Finds the index of the first matching column for the given dataIndex. Finds the index of the first matching column for the given dataIndex. Parameters: `col` : String The dataIndex to find Returns: `Number` The column index, or -1 if no match was found | ColumnModel
| fireEvent( `String eventName`, `Object... args` ) : Boolean Fires the specified event with the passed parameters (minus the event name). Fires the specified event with the passed parameters (minus the event name). Parameters: `eventName` : String `args` : Object... Variable number of parameters are passed to handlers Returns: `Boolean` returns false if any of the handlers return false otherwise it returns true | Observable
| getCellEditor( `Number colIndex`, `Number rowIndex` ) : Ext.Editor Returns the editor defined for the cell/column. Returns the editor defined for the cell/column. Parameters: `colIndex` : Number The column index `rowIndex` : Number The row index Returns: `Ext.Editor` The {@link Ext.Editor Editor} that was created to wrap the {@link Ext.form.Field Field} used to edit the cell. | ColumnModel
| getColumnById( `String id` ) : Object Returns the column for a specified id. Returns the column for a specified id. Parameters: `id` : String The column id Returns: `Object` the column | ColumnModel
| getColumnCount( `Boolean visibleOnly` ) : Number Returns the number of columns. Returns the number of columns. Parameters: `visibleOnly` : Boolean Optional. Pass as true to only include visible columns. Returns: `Number` | ColumnModel
| getColumnHeader( `Number col` ) : String Returns the header for the specified column. Returns the header for the specified column. Parameters: `col` : Number The column index Returns: `String` | ColumnModel
| getColumnId( `Number index` ) : String Returns the id of the column at the specified index. Returns the id of the column at the specified index. Parameters: `index` : Number The column index Returns: `String` the id | ColumnModel
| getColumnTooltip( `Number col` ) : String Returns the tooltip for the specified column. Returns the tooltip for the specified column. Parameters: `col` : Number The column index Returns: `String` | ColumnModel
| getColumnWidth( `Number col` ) : Number Returns the width for the specified column. Returns the width for the specified column. Parameters: `col` : Number The column index Returns: `Number` | ColumnModel
| getColumnsBy( `Function fn`, [`Object scope`] ) : Array Returns the column configs that return true by the passed function that is called with (columnConfig, index) Returns the column configs that return true by the passed function that is called with (columnConfig, index) Parameters: `fn` : Function `scope` : Object (optional) Returns: `Array` result | ColumnModel
| getDataIndex( `Number col` ) : String Returns the dataIndex for the specified column. Returns the dataIndex for the specified column. Parameters: `col` : Number The column index Returns: `String` The column's dataIndex | ColumnModel
| getIndexById( `String id` ) : Number Returns the index for a specified column id. Returns the index for a specified column id. Parameters: `id` : String The column id Returns: `Number` the index, or -1 if not found | ColumnModel
| getRenderer( `Number col` ) : Function Returns the rendering (formatting) function defined for the column. Returns the rendering (formatting) function defined for the column. Parameters: `col` : Number The column index. Returns: `Function` The function used to render the cell. See {@link #setRenderer}. | ColumnModel
| getTotalWidth( `Boolean includeHidden` ) : Number Returns the total width of all columns. Returns the total width of all columns. Parameters: `includeHidden` : Boolean True to include hidden column widths Returns: `Number` | ColumnModel
| hasListener( `String eventName` ) : Boolean Checks to see if this object has any listeners for a specified event Checks to see if this object has any listeners for a specified event Parameters: `eventName` : String The name of the event to check for Returns: `Boolean` True if the event is being listened for, else false | Observable
| isCellEditable( `Number colIndex`, `Number rowIndex` ) : Boolean Returns true if the cell is editable. Returns true if the cell is editable. Parameters: `colIndex` : Number The column index `rowIndex` : Number The row index Returns: `Boolean` | ColumnModel
| isFixed() : void Returns true if the column width cannot be changed Returns true if the column width cannot be changed Parameters: None. Returns: `void` | ColumnModel
| isHidden( `Number colIndex` ) : Boolean Returns true if the column is hidden. Returns true if the column is hidden. Parameters: `colIndex` : Number The column index Returns: `Boolean` | ColumnModel
| isMenuDisabled( `Number col` ) : Boolean Returns true if the specified column menu is disabled. Returns true if the specified column menu is disabled. Parameters: `col` : Number The column index Returns: `Boolean` | ColumnModel
| isResizable() : Boolean Returns true if the column can be resized Returns true if the column can be resized Parameters: None. Returns: `Boolean` | ColumnModel
| isSortable( `Number col` ) : Boolean Returns true if the specified column is sortable. Returns true if the specified column is sortable. Parameters: `col` : Number The column index Returns: `Boolean` | ColumnModel
| moveColumn( `Number oldIndex`, `Number newIndex` ) : void Moves a column from one position to another. Moves a column from one position to another. Parameters: `oldIndex` : Number The index of the column to move. `newIndex` : Number The position at which to reinsert the coolumn. Returns: `void` | ColumnModel
| on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void Appends an event handler to this element (shorthand for addListener) Appends an event handler to this element (shorthand for addListener) Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope in which to execute the handler function. The handler function's "this" context. `options` : Object (optional) Returns: `void` | Observable
| purgeListeners() : void Removes all listeners for this object Removes all listeners for this object Parameters: None. Returns: `void` | Observable
| relayEvents( `Object o`, `Array events` ) : void Relays selected events from the specified Observable as if the events were fired by `this`. Relays selected events from the specified Observable as if the events were fired by `this`. Parameters: `o` : Object The Observable whose events this object is to relay. `events` : Array Array of event names to relay. Returns: `void` | Observable
| removeListener( `String eventName`, `Function handler`, [`Object scope`] ) : void Removes a listener Removes a listener Parameters: `eventName` : String The type of event to listen for `handler` : Function The handler to remove `scope` : Object (optional) The scope (this object) for the handler Returns: `void` | Observable
| resumeEvents() : void Resume firing events. (see suspendEvents) Resume firing events. (see suspendEvents) Parameters: None. Returns: `void` | Observable
| setColumnHeader( `Number col`, `String header` ) : void Sets the header for a column. Sets the header for a column. Parameters: `col` : Number The column index `header` : String The new header Returns: `void` | ColumnModel
| setColumnTooltip( `Number col`, `String tooltip` ) : void Sets the tooltip for a column. Sets the tooltip for a column. Parameters: `col` : Number The column index `tooltip` : String The new tooltip Returns: `void` | ColumnModel
| setColumnWidth( `Number col`, `Number width` ) : void Sets the width for a column. Sets the width for a column. Parameters: `col` : Number The column index `width` : Number The new width Returns: `void` | ColumnModel
| setConfig( `Array config` ) : void Reconfigures this column model according to the passed Array of column definition objects. For a description of the i... Reconfigures this column model according to the passed Array of column definition objects. For a description of the individual properties of a column definition object, see the Config Options. Causes the configchange event to be fired. A GridPanel using this ColumnModel will listen for this event and refresh its UI automatically. Parameters: `config` : Array Array of Column definition objects. Returns: `void` | ColumnModel
| setDataIndex( `Number col`, `String dataIndex` ) : void Sets the dataIndex for a column. Sets the dataIndex for a column. Parameters: `col` : Number The column index `dataIndex` : String The new dataIndex Returns: `void` | ColumnModel
| setEditable( `Number col`, `Boolean editable` ) : void Sets if a column is editable. Sets if a column is editable. Parameters: `col` : Number The column index `editable` : Boolean True if the column is editable Returns: `void` | ColumnModel
| setEditor( `Number col`, `Object editor` ) : void Sets the editor for a column. Sets the editor for a column. Parameters: `col` : Number The column index `editor` : Object The editor object Returns: `void` | ColumnModel
| setHidden( `Number colIndex`, `Boolean hidden` ) : void Sets if a column is hidden. Sets if a column is hidden. Parameters: `colIndex` : Number The column index `hidden` : Boolean True if the column is hidden Returns: `void` | ColumnModel
| setRenderer( `Number col`, `Function fn` ) : void Sets the rendering (formatting) function for a column. See Ext.util.Format for some default formatting functions. Sets the rendering (formatting) function for a column. See Ext.util.Format for some default formatting functions. Parameters: `col` : Number The column index `fn` : Function The function to use to process the cell's raw data to return HTML markup for the grid view. The render function is called with 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. Returns: `void` | ColumnModel
| suspendEvents() : void Suspend the firing of all events. (see resumeEvents) Suspend the firing of all events. (see resumeEvents) Parameters: None. Returns: `void` | Observable
| un( `String eventName`, `Function handler`, [`Object scope`] ) : void Removes a listener (shorthand for removeListener) Removes a listener (shorthand for removeListener) Parameters: `eventName` : String The type of event to listen for `handler` : Function The handler to remove `scope` : Object (optional) The scope (this object) for the handler Returns: `void` | Observable

## Public Events

Event | Defined By
--- | ---
| columnmoved : ( `ColumnModel this`, `Number oldIndex`, `Number newIndex` ) Fires when a column is moved. Fires when a column is moved. Listeners will be called with the following arguments: `this` : ColumnModel `oldIndex` : Number `newIndex` : Number | ColumnModel
| configchange : ( `ColumnModel this` ) Fires when the configuration is changed Fires when the configuration is changed Listeners will be called with the following arguments: `this` : ColumnModel | ColumnModel
| headerchange : ( `ColumnModel this`, `Number columnIndex`, `String newText` ) Fires when the text of a header changes. Fires when the text of a header changes. Listeners will be called with the following arguments: `this` : ColumnModel `columnIndex` : Number The column index `newText` : String The new header text | ColumnModel
| hiddenchange : ( `ColumnModel this`, `Number columnIndex`, `Boolean hidden` ) Fires when a column is hidden or "unhidden". Fires when a column is hidden or "unhidden". Listeners will be called with the following arguments: `this` : ColumnModel `columnIndex` : Number The column index `hidden` : Boolean true if hidden, false otherwise | ColumnModel
| widthchange : ( `ColumnModel this`, `Number columnIndex`, `Number newWidth` ) Fires when the width of a column changes. Fires when the width of a column changes. Listeners will be called with the following arguments: `this` : ColumnModel `columnIndex` : Number The column index `newWidth` : Number The new width | ColumnModel