Ext JS 3.4.0 Sencha Docs

Ext.grid.ColumnModel

Hierarchy

Ext.util.Observable
Ext.grid.ColumnModel

Subclasses

Files

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

Available since: 1.1.0

Defined By

Config options

Ext.grid.ColumnModel
view source
: Array
An Array of object literals. ...

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.

Available since: Ext JS 3.4.0

Ext.grid.ColumnModel
view source
: Boolean
(optional) Default sortable of columns which have no sortable specified (defaults to false). ...

(optional) Default sortable of columns which have no sortable specified (defaults to false). This property shall preferably be configured through the defaults config property.

Defaults to: false

Available since: Ext JS 3.4.0

Ext.grid.ColumnModel
view source
: Number
(optional) The width of columns which have no width specified (defaults to 100). ...

(optional) The width of columns which have no width specified (defaults to 100). This property shall preferably be configured through the defaults config property.

Defaults to: 100

Available since: Ext JS 3.4.0

Ext.grid.ColumnModel
view source
: Object
Object literal which will be used to apply Ext.grid.Column configuration options to all columns. ...

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.

Available since: Ext JS 3.4.0

(optional) A config object containing one or more event handlers to be added to this object during initialization. ...

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


DOM events from ExtJs Components


While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this

is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the Element after the Component has been rendered. A plugin can simplify this step:

// Plugin is configured with a listeners config object.
// The Component is appended to the argument list of all handler functions.
Ext.DomObserver = Ext.extend(Object, {
    constructor: function(config) {
        this.listeners = config.listeners ? config.listeners : config;
    },

    // Component passes itself into plugin's init method
    init: function(c) {
        var p, l = this.listeners;
        for (p in l) {
            if (Ext.isFunction(l[p])) {
                l[p] = this.createHandler(l[p], c);
            } else {
                l[p].fn = this.createHandler(l[p].fn, c);
            }
        }

        // Add the listeners to the Element immediately following the render call
        c.render = c.render.createSequence(function() {
            var e = c.getEl();
            if (e) {
                e.on(l);
            }
        });
    },

    createHandler: function(fn, c) {
        return function(e) {
            fn.call(this, e, c);
        };
    }
});

var combo = new Ext.form.ComboBox({

    // Collapse combo when its element is clicked on
    plugins: [ new Ext.DomObserver({
        click: function(evt, comp) {
            comp.collapse();
        }
    })],
    store: myStore,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all'
});

Available since: 1.1.0

Defined By

Properties

Ext.grid.ColumnModel
view source
: Array
An Array of Column definition objects representing the configuration of this ColumnModel. ...

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

Available since: 1.1.0

Defined By

Methods

Ext.grid.ColumnModel
view source
new( config ) : Ext.grid.ColumnModel
...

Available since: 1.1.0

Parameters

  • config : Mixed

    Specify either an Array of Ext.grid.Column configuration objects or specify a configuration Object (see introductory section discussion utilizing Initialization Method 2 above).

Returns

Adds the specified events to the list of events which this Observable may fire. ...

Adds the specified events to the list of events which this Observable may fire.

Available since: 1.1.0

Parameters

  • o : Object|String

    Either an object with event names as properties with a value of true or the first event name string if multiple event names are being passed as separate parameters.

  • Optional : string

    . Event name if multiple event names are being passed as separate parameters. Usage:

    this.addEvents('storeloaded', 'storecleared');
    
( eventName, handler, [scope], [options] )
Appends an event handler to this object. ...

Appends an event handler to this object.

Available since: 1.1.0

Parameters

  • eventName : String

    The name of the 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
    });

Fires

    Ext.grid.ColumnModel
    view source
    ( )
    Destroys this column model by purging any event listeners. ...

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

    Available since: 2.3.0

    Fires

      Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. ...

      Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. There is no implementation in the Observable base class.

      This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly.

      Example:

      Ext.override(Ext.form.Field, {
          //  Add functionality to Field's initComponent to enable the change event to bubble
          initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
              this.enableBubble('change');
          }),
      
          //  We know that we want Field's events to bubble directly to the FormPanel.
          getBubbleTarget : function() {
              if (!this.formPanel) {
                  this.formPanel = this.findParentByType('form');
              }
              return this.formPanel;
          }
      });
      
      var myForm = new Ext.formPanel({
          title: 'User Details',
          items: [{
              ...
          }],
          listeners: {
              change: function() {
                  // Title goes red if form has been modified.
                  myForm.header.setStyle('color', 'red');
              }
          }
      });
      

      Available since: Ext JS 3.4.0

      Parameters

      • events : String/Array

        The event name to bubble, or an Array of event names.

      Ext.grid.ColumnModel
      view source
      ( 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.

      Available since: 2.3.0

      Parameters

      • col : String

        The dataIndex to find

      Returns

      • Number

        The column index, or -1 if no match was found

      ( eventName, 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).

      An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.

      Available since: 1.1.0

      Parameters

      • eventName : String

        The name of the event to fire.

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

      Fires

        Ext.grid.ColumnModel
        view source
        ( colIndex, rowIndex ) : Ext.Editor
        Returns the editor defined for the cell/column. ...

        Returns the editor defined for the cell/column.

        Available since: 1.1.0

        Parameters

        • colIndex : Number

          The column index

        • rowIndex : Number

          The row index

        Returns

        Ext.grid.ColumnModel
        view source
        ( index )private
        ...

        Available since: Ext JS 3.4.0

        Parameters

        • index : Object
        Ext.grid.ColumnModel
        view source
        ( id ) : Object
        Returns the column for a specified id. ...

        Returns the column for a specified id.

        Available since: 1.1.0

        Parameters

        Returns

        • Object

          the column

        Ext.grid.ColumnModel
        view source
        ( visibleOnly ) : Number
        Returns the number of columns. ...

        Returns the number of columns.

        Available since: 1.1.0

        Parameters

        • visibleOnly : Boolean

          Optional. Pass as true to only include visible columns.

        Returns

        Fires

          Ext.grid.ColumnModel
          view source
          ( col ) : String
          Returns the header for the specified column. ...

          Returns the header for the specified column.

          Available since: 1.1.0

          Parameters

          Returns

          Ext.grid.ColumnModel
          view source
          ( index ) : String
          Returns the id of the column at the specified index. ...

          Returns the id of the column at the specified index.

          Available since: 1.1.0

          Parameters

          • index : Number

            The column index

          Returns

          Ext.grid.ColumnModel
          view source
          ( col ) : String
          Returns the tooltip for the specified column. ...

          Returns the tooltip for the specified column.

          Available since: 1.1.0

          Parameters

          Returns

          Ext.grid.ColumnModel
          view source
          ( col ) : Number
          Returns the width for the specified column. ...

          Returns the width for the specified column.

          Available since: 1.1.0

          Parameters

          Returns

          Ext.grid.ColumnModel
          view source
          ( fn, [scope] ) : Array
          Returns the column configs that return true by the passed function that is called with (columnConfig, index) // retu...

          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;
          });
          

          Available since: 1.1.0

          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.grid.ColumnModel
          view source
          ( col ) : String
          Returns the dataIndex for the specified column. ...

          Returns the dataIndex for the specified column.

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

          Available since: 1.1.0

          Parameters

          Returns

          Ext.grid.ColumnModel
          view source
          ( id ) : Number
          Returns the index for a specified column id. ...

          Returns the index for a specified column id.

          Available since: 1.1.0

          Parameters

          Returns

          • Number

            the index, or -1 if not found

          Ext.grid.ColumnModel
          view source
          ( col ) : Function
          Returns the rendering (formatting) function defined for the column. ...

          Returns the rendering (formatting) function defined for the column.

          Available since: 1.1.0

          Parameters

          • col : Number

            The column index.

          Returns

          Ext.grid.ColumnModel
          view source
          ( col )private
          ...

          Available since: Ext JS 3.4.0

          Parameters

          • col : Object
          Ext.grid.ColumnModel
          view source
          ( includeHidden ) : Number
          Returns the total width of all columns. ...

          Returns the total width of all columns.

          Available since: 1.1.0

          Parameters

          • includeHidden : Boolean

            True to include hidden column widths

          Returns

          Fires

            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

            Available since: 1.1.0

            Parameters

            • eventName : String

              The name of the event to check for

            Returns

            • Boolean

              True if the event is being listened for, else false

            Ext.grid.ColumnModel
            view source
            ( colIndex, rowIndex ) : Boolean
            Returns true if the cell is editable. ...

            Returns true if the cell is editable.

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

            Available since: 1.1.0

            Parameters

            • colIndex : Number

              The column index

            • rowIndex : Number

              The row index

            Returns

            • Boolean
            Ext.grid.ColumnModel
            view source
            ( colIndex ) : Boolean
            Returns true if the column is fixed, false otherwise. ...

            Returns true if the column is fixed, false otherwise.

            Available since: 1.1.0

            Parameters

            • colIndex : Number

              The column index

            Returns

            • Boolean
            Ext.grid.ColumnModel
            view source
            ( colIndex ) : Boolean
            Returns true if the column is hidden, false otherwise. ...

            Returns true if the column is hidden, false otherwise.

            Available since: 1.1.0

            Parameters

            • colIndex : Number

              The column index

            Returns

            • Boolean
            Ext.grid.ColumnModel
            view source
            ( col ) : Boolean
            Returns true if the specified column menu is disabled. ...

            Returns true if the specified column menu is disabled.

            Available since: 2.3.0

            Parameters

            Returns

            • Boolean
            Ext.grid.ColumnModel
            view source
            ( colIndex ) : Boolean
            Returns true if the column can be resized ...

            Returns true if the column can be resized

            Available since: 1.1.0

            Parameters

            • colIndex : Object

            Returns

            • Boolean
            Ext.grid.ColumnModel
            view source
            ( col ) : Boolean
            Returns true if the specified column is sortable. ...

            Returns true if the specified column is sortable.

            Available since: 1.1.0

            Parameters

            Returns

            • Boolean
            Ext.grid.ColumnModel
            view source
            ( oldIndex, newIndex )
            Moves a column from one position to another. ...

            Moves a column from one position to another.

            Available since: 2.3.0

            Parameters

            • oldIndex : Number

              The index of the column to move.

            • newIndex : Number

              The position at which to reinsert the coolumn.

            Fires

            ( eventName, handler, [scope], [options] )
            Appends an event handler to this object (shorthand for addListener.) ...

            Appends an event handler to this object (shorthand for addListener.)

            Available since: 1.1.0

            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.

            Removes all listeners for this object ...

            Removes all listeners for this object

            Available since: 1.1.0

            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.

            Available since: 2.3.0

            Parameters

            • o : Object

              The Observable whose events this object is to relay.

            • events : Array

              Array of event names to relay.

            ( eventName, handler, [scope] )
            Removes an event handler. ...

            Removes an event handler.

            Available since: 1.1.0

            Parameters

            • eventName : String

              The type of event the handler was associated with.

            • handler : Function

              The handler to remove. This must be a reference to the function passed into the addListener call.

            • scope : Object (optional)

              The scope originally specified for the handler.

            Resume firing events. ...

            Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.

            Available since: 2.3.0

            Ext.grid.ColumnModel
            view source
            ( col, header )
            Sets the header for a column. ...

            Sets the header for a column.

            Available since: 1.1.0

            Parameters

            Fires

            Ext.grid.ColumnModel
            view source
            ( col, tooltip )
            Sets the tooltip for a column. ...

            Sets the tooltip for a column.

            Available since: 1.1.0

            Parameters

            • col : Number

              The column index

            • tooltip : String

              The new tooltip

            Ext.grid.ColumnModel
            view source
            ( col, width, suppressEvent )
            Sets the width for a column. ...

            Sets the width for a column.

            Available since: 1.1.0

            Parameters

            • col : Number

              The column index

            • width : Number

              The new width

            • suppressEvent : Boolean

              True to suppress firing the widthchange event. Defaults to false.

            Fires

            Ext.grid.ColumnModel
            view source
            ( config, initial )
            Reconfigures this column model according to the passed Array of column definition objects. ...

            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.

            Available since: 2.3.0

            Parameters

            • config : Array

              Array of Column definition objects.

            • initial : Boolean

              Specify true to bypass cleanup which deletes the totalWidth and destroys existing editors.

            Fires

            Ext.grid.ColumnModel
            view source
            ( col, dataIndex )
            Sets the dataIndex for a column. ...

            Sets the dataIndex for a column.

            Available since: 1.1.0

            Parameters

            • col : Number

              The column index

            • dataIndex : String

              The new dataIndex

            Ext.grid.ColumnModel
            view source
            ( col, editable )
            Sets if a column is editable. ...

            Sets if a column is editable.

            Available since: 1.1.0

            Parameters

            • col : Number

              The column index

            • editable : Boolean

              True if the column is editable

            Ext.grid.ColumnModel
            view source
            ( col, editor )
            Sets the editor for a column and destroys the prior editor. ...

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

            Available since: 1.1.0

            Parameters

            • col : Number

              The column index

            • editor : Object

              The editor object

            Ext.grid.ColumnModel
            view source
            ( colIndex, hidden )
            Sets if a column is hidden. ...

            Sets if a column is hidden.

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

            Available since: 1.1.0

            Parameters

            • colIndex : Number

              The column index

            • hidden : Boolean

              True if the column is hidden

            Fires

            Ext.grid.ColumnModel
            view source
            ( col, fn )
            Sets the rendering (formatting) function for a column. ...

            Sets the rendering (formatting) function for a column. See Ext.util.Format for some default formatting functions.

            Available since: 1.1.0

            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.

            Ext.grid.ColumnModel
            view source
            ( col, state )private
            Setup any saved state for the column, ensures that defaults are applied. ...

            Setup any saved state for the column, ensures that defaults are applied.

            Available since: Ext JS 3.4.0

            Parameters

            • col : Object
            • state : Object
            Suspend the firing of all events. ...

            Suspend the firing of all events. (see resumeEvents)

            Available since: 2.3.0

            Parameters

            • queueSuspended : Boolean

              Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;

            ( eventName, handler, [scope] )
            Removes an event handler (shorthand for removeListener.) ...

            Removes an event handler (shorthand for removeListener.)

            Available since: 1.1.0

            Parameters

            • eventName : String

              The type of event the handler was associated with.

            • handler : Function

              The handler to remove. This must be a reference to the function passed into the addListener call.

            • scope : Object (optional)

              The scope originally specified for the handler.

            Defined By

            Events

            Ext.grid.ColumnModel
            view source
            ( this, oldIndex, newIndex )
            Fires when a column is moved. ...

            Fires when a column is moved.

            Available since: 1.1.0

            Parameters

            Ext.grid.ColumnModel
            view source
            ( this )
            Fires when the configuration is changed ...

            Fires when the configuration is changed

            Available since: 2.3.0

            Parameters

            • this : ColumnModel
            Ext.grid.ColumnModel
            view source
            ( this, columnIndex, newText )
            Fires when the text of a header changes. ...

            Fires when the text of a header changes.

            Available since: 1.1.0

            Parameters

            • this : ColumnModel
            • columnIndex : Number

              The column index

            • newText : String

              The new header text

            Ext.grid.ColumnModel
            view source
            ( this, columnIndex, hidden )
            Fires when a column is hidden or "unhidden". ...

            Fires when a column is hidden or "unhidden".

            Available since: 1.1.0

            Parameters

            • this : ColumnModel
            • columnIndex : Number

              The column index

            • hidden : Boolean

              true if hidden, false otherwise

            Ext.grid.ColumnModel
            view source
            ( this, columnIndex, newWidth )
            Fires when the width of a column is programmaticially changed using setColumnWidth. ...

            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.

            Available since: 1.1.0

            Parameters

            • this : ColumnModel
            • columnIndex : Number

              The column index

            • newWidth : Number

              The new width