After the data has been read into the client side cache (Store), the ColumnModel is used to configure how and what parts of that data will be displayed in the vertical slices (columns) of the grid. The Ext.ColumnModel Class is the default implementation of a ColumnModel used by implentations of GridPanel.

Data is mapped into the store's records and then indexed into the ColumnModel using the dataIndex:

{data source} == mapping ==> {data store} == dataIndex ==> {ColumnModel}

Each Column in the grid's ColumnModel is configured with a dataIndex to specify how the data within each record in the store is indexed into the ColumnModel.

There are two ways to initialize the ColumnModel class:

Initialization Method 1: an Array

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

The ColumnModel may be initialized with an Array of Ext.grid.Column column configuration objects to define the initial layout / display of the columns in the Grid. The order of each Ext.grid.Column column configuration object within the specified Array defines the initial order of the column display. A Column's display may be initially hidden using the hidden config property (and then shown using the column header menu). Fields that are not included in the ColumnModel will not be displayable at all.

How each column in the grid correlates (maps) to the Ext.data.Record field in the Store the column draws its data from is configured through the dataIndex. If the dataIndex is not explicitly defined (as shown in the example above) it will use the column configuration's index in the Array as the index.

See Ext.grid.Column for additional configuration options for each column.

Initialization Method 2: an Object

In order to use configuration options from Ext.ColumnModel, an Object may be used to initialize the ColumnModel. The column configuration Array will be specified in the columns config property. The defaults config property can be used to apply defaults for all columns, e.g.:

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

In both examples above, the ability to apply a CSS class to all cells in a column (including the header) is demonstrated through the use of the id config option. This column could be styled by including the following css:

//add this css *after* the core css is loaded
.x-grid3-td-company {
    color: red; // entire column will have red font
}
// modify the header row only, adding an icon to the column header
.x-grid3-hd-company {
    background: transparent
        url(../../resources/images/icons/silk/building.png)
        no-repeat 3px 3px ! important;
        padding-left:20px;
}

Note that the "Company Name" column could be specified as the Ext.grid.GridPanel.autoExpandColumn.

Config Options

columns : Array

An Array of object literals. The config options defined by Ext.grid.Column are the options which may appear in the o...

An Array of object literals. The config options defined by Ext.grid.Column are the options which may appear in the object literal for each individual column definition.

defaults : Object

Object literal which will be used to apply Ext.grid.Column configuration options to all columns. Configuration optio...

Object literal which will be used to apply Ext.grid.Column configuration options to all columns. Configuration options specified with individual column configs will supersede these defaults.

Properties

config : Array

An Array of Column definition objects representing the configuration of this ColumnModel. See Ext.grid.Column for th...

An Array of Column definition objects representing the configuration of this ColumnModel. See Ext.grid.Column for the configuration properties that may be specified.

Methods

destroy : Void

Destroys this column model by purging any event listeners. Destroys and dereferences all Columns.

findColumnIndex( String col ) : Number

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 null if no match was found

getCellEditor( Number colIndex, Number rowIndex ) : Ext.Editor

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.

getColumnAt( Number index ) : Ext.Column

Returns the column at the specified index.

Parameters

index : Number
The column index

Returns

Ext.Column column

getColumnById( String id ) : Object

Returns the column for a specified id.

Parameters

id : String
The column id

Returns

Object the column

getColumnCount( Boolean visibleOnly ) : Number

Returns the number of columns.

Parameters

visibleOnly : Boolean
Optional. Pass as true to only include visible columns.

Returns

Number undefined

getColumnHeader( Number col ) : String

Returns the header for the specified column.

Parameters

col : Number
The column index

Returns

String undefined

getColumnId( Number index ) : String

Returns the id of the column at the specified index.

Parameters

index : Number
The column index

Returns

String the id

getColumnTooltip( Number col ) : String

Returns the tooltip for the specified column.

Parameters

col : Number
The column index

Returns

String undefined

getColumnWidth( Number col ) : Number

Returns the width for the specified column.

Parameters

col : Number
The column index

Returns

Number undefined

getColumnsBy( Function fn, [Object scope] ) : Ext.util.MixedCollection

Returns the column configs that return true by the passed function that is called with (columnConfig, index) // retur...

Returns the column configs that return true by the passed function that is called with (columnConfig, index)

// returns an array of column config objects for all hidden columns
var columns = grid.getColumnModel().getColumnsBy(function(c){
  return c.hidden;
});

Parameters

fn : Function
A function which, when passed a Column object, must return true if the column is to be included in the returned Array.
scope : Object
(optional) The scope (this reference) in which the function is executed. Defaults to this ColumnModel.

Returns

Ext.util.MixedCollection result

getDataIndex( Number col ) : String

Returns the dataIndex for the specified column. // Get field name for the column var fieldName = grid.getColumnModel(...

Returns the dataIndex for the specified column.

// Get field name for the column
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);

Parameters

col : Number
The column index

Returns

String The column's dataIndex

getIndexById( String id ) : Number

Returns the index for a specified column id.

Parameters

id : String
The column id

Returns

Number the index, or -1 if not found

getRenderer( Number col ) : Function

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

getTotalWidth( Boolean includeHidden ) : Number

Returns the total width of all columns.

Parameters

includeHidden : Boolean
True to include hidden column widths

Returns

Number undefined

isCellEditable( Number colIndex, Number rowIndex ) : Boolean

Returns true if the cell is editable. var store = new Ext.data.Store({...}); var colModel = new Ext.ColumnModel({ c...

Returns true if the cell is editable.

var store = new Ext.data.Store({...});
var colModel = new Ext.ColumnModel({
  columns: [...],
  isCellEditable: function(col, row) {
    var record = store.getAt(row);
    if (record.get('readonly')) { // replace with your condition
      return false;
    }
    return Ext.ColumnModel.prototype.isCellEditable.call(this, col, row);
  }
});
var grid = new Ext.grid.GridPanel({
  store: store,
  colModel: colModel,
  ...
});

Parameters

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

Returns

Boolean undefined

isFixed( Number colIndex ) : Boolean

Returns true if the column is fixed, false otherwise.

Returns true if the column is fixed, false otherwise.

Parameters

colIndex : Number
The column index

Returns

Boolean undefined

isHidden( Number colIndex ) : Boolean

Returns true if the column is hidden, false otherwise.

Returns true if the column is hidden, false otherwise.

Parameters

colIndex : Number
The column index

Returns

Boolean undefined

isMenuDisabled( Number col ) : Boolean

Returns true if the specified column menu is disabled.

Parameters

col : Number
The column index

Returns

Boolean undefined

isResizable : Boolean

Returns true if the column can be resized

isSortable( Number col ) : Boolean

Returns true if the specified column is sortable.

Parameters

col : Number
The column index

Returns

Boolean undefined

moveColumn( Number oldIndex, Number newIndex ) : Void

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

Returns

Void

setColumnHeader( Number col, String header ) : Void

Sets the header for a column.

Parameters

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

Returns

Void

setColumnTooltip( Number col, String tooltip ) : Void

Sets the tooltip for a column.

Parameters

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

Returns

Void

setColumnWidth( Number col, Number width, Boolean suppressEvent ) : Void

Sets the width for a column.

Parameters

col : Number
The column index
width : Number
The new width
suppressEvent : Boolean
True to suppress firing the widthchange event. Defaults to false.

Returns

Void

setDataIndex( Number col, String dataIndex ) : Void

Sets the dataIndex for a column.

Parameters

col : Number
The column index
dataIndex : String
The new dataIndex

Returns

Void

setEditable( Number col, Boolean editable ) : Void

Sets if a column is editable.

Parameters

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

Returns

Void

setEditor( Number col, Object editor ) : Void

Sets the editor for a column and destroys the prior editor.

Parameters

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

Returns

Void

setHidden( Number colIndex, Boolean hidden ) : Void

Sets if a column is hidden. myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column).

Sets if a column is hidden.

myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column).

Parameters

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

Returns

Void

setRenderer( Number col, Function fn ) : Void

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

Events

columnmoved( ColumnModel this, Number oldIndex, Number newIndex )

Fires when a column is moved.

Parameters

this : ColumnModel
oldIndex : Number
newIndex : Number

Returns

Void

configchange( ColumnModel this )

Fires when the configuration is changed

Parameters

this : ColumnModel

Returns

Void

headerchange( ColumnModel this, Number columnIndex, String newText )

Fires when the text of a header changes.

Parameters

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

Returns

Void

hiddenchange( ColumnModel this, Number columnIndex, Boolean hidden )

Fires when a column is hidden or "unhidden".

Parameters

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

Returns

Void

widthchange( ColumnModel this, Number columnIndex, Number newWidth )

Fires when the width of a column is programmaticially changed using setColumnWidth. Note internal resizing suppresses...

Fires when the width of a column is programmaticially changed using setColumnWidth. Note internal resizing suppresses the event from firing. See also Ext.grid.GridPanel.columnresize.

Parameters

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

Returns

Void

Sencha Documentation

Ext.ColumnModel

Config Options

Properties

Methods

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Events

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns