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   -  Config Options

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
  ColumnModelObject config ) ColumnModel
  addEventsObject object ) : void Observable
Used to define events on this Observable
  addListenerString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this component
  fireEventString eventName, Object... args ) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  getCellEditorNumber colIndex, Number rowIndex ) : Object ColumnModel
Returns the editor defined for the cell/column.
  getColumnByIdString id ) : Object ColumnModel
Returns the column for a specified id.
  getColumnCount() : Number ColumnModel
Returns the number of columns.
  getColumnHeaderNumber col ) : String ColumnModel
Returns the header for the specified column.
  getColumnIdNumber index ) : String ColumnModel
Returns the id of the column at the specified index.
  getColumnTooltipNumber col ) : String ColumnModel
Returns the tooltip for the specified column.
  getColumnWidthNumber col ) : Number ColumnModel
Returns the width for the specified column.
  getColumnsByFunction fn, [Object scope] ) : Array ColumnModel
Returns the column configs that return true by the passed function that is called with (columnConfig, index)
  getDataIndexNumber col ) : Number ColumnModel
Returns the dataIndex for the specified column.
  getIndexByIdString id ) : Number ColumnModel
Returns the index for a specified column id.
  getRendererNumber col ) : Function ColumnModel
Returns the rendering (formatting) function defined for the column.
  getTotalWidthBoolean includeHidden ) : Number ColumnModel
Returns the total width of all columns.
  hasListenerString eventName ) : Boolean Observable
Checks to see if this object has any listeners for a specified event
  isCellEditableNumber colIndex, Number rowIndex ) : Boolean ColumnModel
Returns true if the cell is editable.
  isFixed() : void ColumnModel
Returns true if the column width cannot be changed
  isHiddenNumber colIndex ) : Boolean ColumnModel
Returns true if the column is hidden.
  isResizable() : Boolean ColumnModel
Returns true if the column can be resized
  isSortableNumber col ) : Boolean ColumnModel
Returns true if the specified column is sortable.
  onString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  removeListenerString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener
  setColumnHeaderNumber col, String header ) : void ColumnModel
Sets the header for a column.
  setColumnTooltipNumber col, String tooltip ) : void ColumnModel
Sets the tooltip for a column.
  setColumnWidthNumber col, Number width ) : void ColumnModel
Sets the width for a column.
  setDataIndexNumber col, Number dataIndex ) : void ColumnModel
Sets the dataIndex for a column.
  setEditableNumber col, Boolean editable ) : void ColumnModel
Sets if a column is editable.
  setEditorNumber col, Object editor ) : void ColumnModel
Sets the editor for a column.
  setHiddenNumber colIndex, Boolean hidden ) : void ColumnModel
Sets if a column is hidden.
  setRendererNumber col, Function fn ) : void ColumnModel
Sets the rendering (formatting) function for a column.
  unString 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, Boolean 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.

Config Options

Config Options Defined By
  align : String ColumnModel
(Optional) Set the CSS text-align property of the column. Defaults to undefined.
  dataIndex : String ColumnModel
(Optional) The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the col...
  fixed : Boolean ColumnModel
(Optional) True if the column width cannot be changed. Defaults to false.
  header : String ColumnModel
The header text to display in the Grid view.
  hidden : Boolean ColumnModel
(Optional) True to hide the column. Defaults to false.
  locked : Boolean ColumnModel
(Optional) True to lock the column in place while scrolling the Grid. Defaults to false.
  renderer : Function ColumnModel
(Optional) A function used to generate HTML markup for a cell given the cell's data value. See setRenderer. If not sp...
  resizable : Boolean ColumnModel
(Optional) False to disable column resizing. Defaults to true.
  sortable : Boolean ColumnModel
(Optional) True if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Wh...
  width : Number ColumnModel
(Optional) The initial width in pixels of the column. Using this instead of Ext.grid.Grid.autoSizeColumns is more eff...

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 )
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
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.
    • 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)

    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.

    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 which passes the same scope object to all handlers:

    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.

getColumnById

public function getColumnById( String id )
Returns the column for a specified id.
Parameters:
  • id : String
    The column id
Returns:
  • Object
    the column
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
    The column index
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.

getColumnsBy

public function getColumnsBy( Function fn, [Object scope] )
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
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.

getIndexById

public function getIndexById( String id )
Returns the index for a specified column id.
Parameters:
  • id : String
    The column id
Returns:
  • Number
    the index, or -1 if not found
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 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
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 can 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 scope], [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
  • scope : Object
    (optional) The scope in which to execute the handler function. The handler function's "this" context.
  • 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 : Boolean
    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.

Config Details

align

align : String
(Optional) Set the CSS text-align property of the column. Defaults to undefined.
This config option is defined by ColumnModel.

dataIndex

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 column's value. If not specified, the column's index is used as an index into the Record's data Array.
This config option is defined by ColumnModel.

fixed

fixed : Boolean
(Optional) True if the column width cannot be changed. Defaults to false.
This config option is defined by ColumnModel.

header

header : String
The header text to display in the Grid view.
This config option is defined by ColumnModel.

hidden

hidden : Boolean
(Optional) True to hide the column. Defaults to false.
This config option is defined by ColumnModel.

locked

locked : Boolean
(Optional) True to lock the column in place while scrolling the Grid. Defaults to false.
This config option is defined by ColumnModel.

renderer

renderer : Function
(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.
This config option is defined by ColumnModel.

resizable

resizable : Boolean
(Optional) False to disable column resizing. Defaults to true.
This config option is defined by ColumnModel.

sortable

sortable : Boolean
(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.
This config option is defined by ColumnModel.

width

width : Number
(Optional) The initial width in pixels of the column. Using this instead of Ext.grid.Grid.autoSizeColumns is more efficient.
This config option is defined by ColumnModel.

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