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 otional 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 listed for this class are options which may appear in each individual column definition.

## Config Options

Config Options | Defined By
--- | ---
| align : String (optional) Set the CSS text-align property of the column. 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. | 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 <pr>x-grid3-hd, so to target header cells, use CSS selectors such as:

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

The Ext.grid.Grid.autoExpandColumn grid config option references the column via this identifier.

ColumnModel

| listeners : Object A config object containing one or more event handlers to be added to this object during initialization. This should b... 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
| 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
| width : Number (optional) The initial width in pixels of the column. Using this instead of Ext.grid.Grid.autoSizeColumns is more eff... (optional) The initial width in pixels of the column. Using this instead of Ext.grid.Grid.autoSizeColumns is more efficient. | ColumnModel

## Public Properties

Property | Defined By
--- | ---
| 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
| setConfig : Object The config passed into the constructor | 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 in which to execute the handler function. The handler function's "this" context.
- `options` : Object
  (optional) An object containing handler configuration properties. This may contain any of the following properties:
  - scope : Object

    The scope in which to execute the handler function. The handler function's "this" context.

  - 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.

  Combining Options
  Using the options argument, it is possible to combine different types of listeners:
  A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

      el.on('click', this.onClick, this, {
          single: true,
          delay: 100,
          forumId: 4
      });

  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.

      foo.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:

      foo.on({
          'click' : this.onClick,
          'mouseover' : this.onMouseOver,
          'mouseout' : this.onMouseOut,
           scope: this
      });

Returns:

- `void`

Observable

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` ) : Object
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:

- `Object`

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() : Number
Returns the number of columns.
Returns the number of columns.
Parameters:

- None.

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` ) : Number
Returns the dataIndex for the specified column.
Returns the dataIndex for the specified column.
Parameters:

- `col` : Number
  The column index

Returns:

- `Number`

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

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

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

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
Reconfigures this column model
Parameters:

- `config` : Array
  Array of Column configs

Returns:

- `void`

ColumnModel

setDataIndex( `Number col`, `Number dataIndex` ) : void
Sets the dataIndex for a column.
Sets the dataIndex for a column.
Parameters:

- `col` : Number
  The column index
- `dataIndex` : Number
  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

configchanged : ( `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