Print Friendly

# Class Ext.grid.ColumnModel

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

This is the default implementation of a ColumnModel used by the Grid. It defines the columns in the grid.
Usage:

    var colModel = new Ext.grid.ColumnModel([
    	{header: "Ticker", width: 60, sortable: true, locked: 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.

Properties - Methods - Events

## Public Properties

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

## Public Methods

Method | Defined By
--- | ---
| ColumnModel(`Object config`) | ColumnModel
| addEvents(`Object object`) : void | Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`]) : void | Observable
Appends an event handler to this component
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getCellEditor(`Number colIndex`, `Number rowIndex`) : Object | ColumnModel
Returns the editor defined for the cell/column.
| getColumnCount() : Number | ColumnModel
Returns the number of columns.
| getColumnHeader(`Number col`) : String | ColumnModel
Returns the header for the specified column.
| getColumnId(`Number index`) : String | ColumnModel
* Returns the id of the column at the specified index
| getColumnTooltip(`Number col`) : String | ColumnModel
Returns the tooltip for the specified column.
| getColumnWidth(`Number col`) : Number | ColumnModel
Returns the width for the specified column.
| getDataIndex(`Number col`) : Number | ColumnModel
Returns the dataIndex for the specified column.
| getRenderer(`Number col`) : Function | ColumnModel
Returns the rendering (formatting) function defined for the column.
| getTotalWidth(`Boolean includeHidden`) : Number | ColumnModel
Returns the total width of all columns.
| hasListener(`String eventName`) : Boolean | Observable
Checks to see if this object is currently listening for a specified event
| isCellEditable(`Number colIndex`, `Number rowIndex`) : Boolean | ColumnModel
Returns true if the cell is editable.
| isFixed() : void | ColumnModel
Returns true if the column width cannot be changed
| isHidden(`Number colIndex`) : Boolean | ColumnModel
Returns true if the column is hidden.
| isResizable() : Boolean | ColumnModel
Returns true if the column cannot be resized
| isSortable(`Number col`) : Boolean | ColumnModel
Returns true if the specified column is sortable.
| on(`String eventName`, `Function handler`, [`Object options`]) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| purgeListeners() : void | Observable
Removes all listeners for this object
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| setColumnHeader(`Number col`, `String header`) : void | ColumnModel
Sets the header for a column.
| setColumnTooltip(`Number col`, `String tooltip`) : void | ColumnModel
Sets the tooltip for a column.
| setColumnWidth(`Number col`, `Number width`) : void | ColumnModel
Sets the width for a column.
| setDataIndex(`Number col`, `Number dataIndex`) : void | ColumnModel
Sets the dataIndex for a column.
| setEditable(`Number col`, `Boolean editable`) : void | ColumnModel
Sets if a column is editable.
| setEditor(`Number col`, `Object editor`) : void | ColumnModel
Sets the editor for a column.
| setHidden(`Number colIndex`, `Boolean hidden`) : void | ColumnModel
Sets if a column is hidden.
| setRenderer(`Number col`, `Function fn`) : void | ColumnModel
Sets the rendering (formatting) function for a column.
| un(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener (shorthand for removeListener)

## Public Events

Event | Defined By
--- | ---
| columlockchange : (`ColumnModel this`, `Number colIndex`, `Boolean locked`) | ColumnModel
Fires when a column's locked state is changed
| columnmoved : (`ColumnModel this`, `Number oldIndex`, `Number newIndex`) | ColumnModel
Fires when a column is moved
| headerchange : (`ColumnModel this`, `Number columnIndex`, `Number newText`) | ColumnModel
Fires when the text of a header changes
| hiddenchange : (`ColumnModel this`, `Number columnIndex`, `Number hidden`) | ColumnModel
Fires when a column is hidden or "unhidden"
| widthchange : (`ColumnModel this`, `Number columnIndex`, `Number newWidth`) | ColumnModel
Fires when the width of a column changes

## Property Details

### config

`public Object config`
The config passed into the constructor
This property is defined by ColumnModel.

### defaultSortable

`public Boolean defaultSortable`
Default sortable of columns which have no sortable specified (defaults to false)
This property is defined by ColumnModel.

### defaultWidth

`public Number defaultWidth`
The width of columns which have no width specified (defaults to 100)
This property is defined by ColumnModel.

## Constructor Details

### ColumnModel

`public function ColumnModel(`Object config`)`
Parameters:

- `config` : Object
  An Array of column config objects. See this class's config objects for details.

## Method Details

### addEvents

`public function addEvents(`Object object`)`
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:

- `object` : Object
  The object from which to copy events

Returns:

- `void`

This method is defined by Observable.

### addListener

`public function addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`])`
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.
  - delegate {String} A simple selector to filter the target or look for a descendant of the target
  - stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
  - preventDefault {Boolean} True to prevent the default action
  - stopPropagation {Boolean} True to prevent event propagation
  - normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
  - delay {Number} The number of milliseconds to delay the invocation of the handler after te 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)

  Code:

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

  The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

  Attaching multiple handlers in 1 call
  Code:

      el.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:
  Code:

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

Returns:

- `void`

This method is defined by Observable.

### fireEvent

`public function fireEvent(`String eventName`, `Object... args`)`
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

This method is defined by Observable.

### getCellEditor

`public function getCellEditor(`Number colIndex`, `Number rowIndex`)`
Returns the editor defined for the cell/column.
Parameters:

- `colIndex` : Number
  The column index
- `rowIndex` : Number
  The row index

Returns:

- `Object`

This method is defined by ColumnModel.

### getColumnCount

`public function getColumnCount()`
Returns the number of columns.
Parameters:

- None.

Returns:

- `Number`

This method is defined by ColumnModel.

### getColumnHeader

`public function getColumnHeader(`Number col`)`
Returns the header for the specified column.
Parameters:

- `col` : Number
  The column index

Returns:

- `String`

This method is defined by ColumnModel.

### getColumnId

`public function getColumnId(`Number index`)`
* Returns the id of the column at the specified index
Parameters:

- `index` : Number

Returns:

- `String`
  the id

This method is defined by ColumnModel.

### getColumnTooltip

`public function getColumnTooltip(`Number col`)`
Returns the tooltip for the specified column.
Parameters:

- `col` : Number
  The column index

Returns:

- `String`

This method is defined by ColumnModel.

### getColumnWidth

`public function getColumnWidth(`Number col`)`
Returns the width for the specified column.
Parameters:

- `col` : Number
  The column index

Returns:

- `Number`

This method is defined by ColumnModel.

### getDataIndex

`public function getDataIndex(`Number col`)`
Returns the dataIndex for the specified column.
Parameters:

- `col` : Number
  The column index

Returns:

- `Number`

This method is defined by ColumnModel.

### getRenderer

`public function getRenderer(`Number col`)`
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}.

This method is defined by ColumnModel.

### getTotalWidth

`public function getTotalWidth(`Boolean includeHidden`)`
Returns the total width of all columns.
Parameters:

- `includeHidden` : Boolean
  True to include hidden column widths

Returns:

- `Number`

This method is defined by ColumnModel.

### hasListener

`public function hasListener(`String eventName`)`
Checks to see if this object is currently listening 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

This method is defined by Observable.

### isCellEditable

`public function isCellEditable(`Number colIndex`, `Number rowIndex`)`
Returns true if the cell is editable.
Parameters:

- `colIndex` : Number
  The column index
- `rowIndex` : Number
  The row index

Returns:

- `Boolean`

This method is defined by ColumnModel.

### isFixed

`public function isFixed()`
Returns true if the column width cannot be changed
Parameters:

- None.

Returns:

- `void`

This method is defined by ColumnModel.

### isHidden

`public function isHidden(`Number colIndex`)`
Returns true if the column is hidden.
Parameters:

- `colIndex` : Number
  The column index

Returns:

- `Boolean`

This method is defined by ColumnModel.

### isResizable

`public function isResizable()`
Returns true if the column cannot be resized
Parameters:

- None.

Returns:

- `Boolean`

This method is defined by ColumnModel.

### isSortable

`public function isSortable(`Number col`)`
Returns true if the specified column is sortable.
Parameters:

- `col` : Number
  The column index

Returns:

- `Boolean`

This method is defined by ColumnModel.

### on

`public function on(`String eventName`, `Function handler`, [`Object options`])`
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
- `options` : Object
  (optional)

Returns:

- `void`

This method is defined by Observable.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### removeListener

`public function removeListener(`String eventName`, `Function handler`, [`Object scope`])`
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`

This method is defined by Observable.

### setColumnHeader

`public function setColumnHeader(`Number col`, `String header`)`
Sets the header for a column.
Parameters:

- `col` : Number
  The column index
- `header` : String
  The new header

Returns:

- `void`

This method is defined by ColumnModel.

### setColumnTooltip

`public function setColumnTooltip(`Number col`, `String tooltip`)`
Sets the tooltip for a column.
Parameters:

- `col` : Number
  The column index
- `tooltip` : String
  The new tooltip

Returns:

- `void`

This method is defined by ColumnModel.

### setColumnWidth

`public function setColumnWidth(`Number col`, `Number width`)`
Sets the width for a column.
Parameters:

- `col` : Number
  The column index
- `width` : Number
  The new width

Returns:

- `void`

This method is defined by ColumnModel.

### setDataIndex

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

- `col` : Number
  The column index
- `dataIndex` : Number
  The new dataIndex

Returns:

- `void`

This method is defined by ColumnModel.

### setEditable

`public function setEditable(`Number col`, `Boolean editable`)`
Sets if a column is editable.
Parameters:

- `col` : Number
  The column index
- `editable` : Boolean
  True if the column is editable

Returns:

- `void`

This method is defined by ColumnModel.

### setEditor

`public function setEditor(`Number col`, `Object editor`)`
Sets the editor for a column.
Parameters:

- `col` : Number
  The column index
- `editor` : Object
  The editor object

Returns:

- `void`

This method is defined by ColumnModel.

### setHidden

`public function setHidden(`Number colIndex`, `Boolean hidden`)`
Sets if a column is hidden.
Parameters:

- `colIndex` : Number
  The column index
- `hidden` : Boolean
  True if the column is hidden

Returns:

- `void`

This method is defined by ColumnModel.

### setRenderer

`public function setRenderer(`Number col`, `Function fn`)`
Sets the rendering (formatting) function for a column.
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:
  - Data value.
  - Cell metadata. An object in which you may set the following attributes:
    - css A CSS style string to apply to the table cell.
    - attr An HTML attribute definition string to apply to the data container element within the table cell.
  - The Ext.data.Record from which the data was extracted.
  - Row index
  - Column index
  - The Ext.data.Store object from which the Record was extracted

Returns:

- `void`

This method is defined by ColumnModel.

### un

`public function un(`String eventName`, `Function handler`, [`Object scope`])`
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`

This method is defined by Observable.

## Event Details

### columlockchange

`public event columlockchange`
Fires when a column's locked state is changed
Subscribers will be called with the following parameters:

- `this` : ColumnModel
- `colIndex` : Number
- `locked` : Boolean
  true if locked

This event is defined by ColumnModel.

### columnmoved

`public event columnmoved`
Fires when a column is moved
Subscribers will be called with the following parameters:

- `this` : ColumnModel
- `oldIndex` : Number
- `newIndex` : Number

This event is defined by ColumnModel.

### headerchange

`public event headerchange`
Fires when the text of a header changes
Subscribers will be called with the following parameters:

- `this` : ColumnModel
- `columnIndex` : Number
  The column index
- `newText` : Number
  The new header text

This event is defined by ColumnModel.

### hiddenchange

`public event hiddenchange`
Fires when a column is hidden or "unhidden"
Subscribers will be called with the following parameters:

- `this` : ColumnModel
- `columnIndex` : Number
  The column index
- `hidden` : Number
  true if hidden, false otherwise

This event is defined by ColumnModel.

### widthchange

`public event widthchange`
Fires when the width of a column changes
Subscribers will be called with the following parameters:

- `this` : ColumnModel
- `columnIndex` : Number
  The column index
- `newWidth` : Number
  The new width

This event is defined by ColumnModel.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.