Ext JS 3.4.0 Sencha Docs

Ext.grid.Column

Hierarchy

Ext.util.Observable
Ext.grid.Column

Subclasses

Files

This class encapsulates column configuration data to be used in the initialization of a ColumnModel.

While subclasses are provided to render data in different ways, this class renders a passed data field unchanged and is usually used for textual columns.

Available since: Ext JS 3.4.0

Defined By

Config options

Ext.grid.Column
view source
: String
Optional. ...

Optional. Set the CSS text-align property of the column. Defaults to undefined.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: String
Optional. ...

Optional. An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: String
Required. ...

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

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Boolean
Optional. ...

Optional. Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The initial configuration may be dynamically altered using Ext.grid.ColumnModel.setEditable().

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Ext.form.Field
Optional. ...

Optional. The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See editable also.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: String
Optional. ...

Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text to display when there is an empty group value. Defaults to the Ext.grid.GroupingView.emptyGroupText.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Boolean
Optional. ...

Optional. true if the column width cannot be changed. Defaults to false.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: String
Optional. ...

Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text with which to prefix the group field value in the group header line. See also groupRenderer and Ext.grid.GroupingView.showGroupName.

Available since: Ext JS 3.4.0

Optional. ...

Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. If a groupRenderer is not specified, the configured renderer will be called; if a renderer is also not specified the new value of the group field will be used.

The called function (either the groupRenderer or renderer) will be passed the following parameters:

  • v : Object

    The new value of the group field.

  • unused : undefined

    Unused parameter.

  • r : Ext.data.Record

    The Record providing the data for the row which caused group change.

  • rowIndex : Number

    The row index of the Record which caused group change.

  • colIndex : Number

    The column index of the group field.

  • ds : Ext.data.Store

    The Store which is providing the data Model.

The function should return a string value.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Boolean
Optional. ...

Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to disable the header menu item to group by the column selected. Defaults to true, which enables the header menu group option. Set to false to disable (but still show) the group option in the header menu for the column. See also groupName.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: String
Optional. ...

Optional. The header text to be used as innerHTML (html tags are accepted) to display in the Grid view. Note: to have a clickable header with no text displayed use ' '.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Boolean
Optional. ...

Optional. true to initially hide this column. Defaults to false. A hidden column may be shown via the header row menu. If a column is never to be shown, simply do not include this column in the Column Model at all.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Boolean
Optional. ...

Optional. Specify as false to prevent the user from hiding this column (defaults to true). To disallow column hiding globally for all columns in the grid, use Ext.grid.GridPanel.enableColumnHide instead.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: String
Optional. ...

Optional. A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to create a CSS class name which is applied to all table cells (including headers) in that column (in this context the id does not need to be unique). The class name takes the form of

x-grid3-td-id

Header cells will also receive this class name, but will also have the class

x-grid3-hd

So, to target header cells, use CSS selectors such as:

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

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

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Booleanprivate
Used by ColumnModel setConfig method to avoid reprocessing a Column if isColumn is not set ColumnModel will recreate ...

Used by ColumnModel setConfig method to avoid reprocessing a Column if isColumn is not set ColumnModel will recreate a new Ext.grid.Column Defaults to true.

Defaults to: true

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

Ext.grid.Column
view source
: Boolean
Optional. ...

Optional. true to disable the column menu. Defaults to false.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Mixed
For an alternative to specifying a renderer see xtype Optional. ...

For an alternative to specifying a renderer see xtype

Optional. A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered). This may be specified in either of three ways:

  • A renderer function used to return HTML markup for a cell given the cell's data value.
  • A string which references a property name of the Ext.util.Format class which provides a renderer function.
  • An object specifying both the renderer function, and its execution scope (this reference) e.g.:
    
    {
        fn: this.gridRenderer,
        scope: this
    }
    
If not specified, the default renderer uses the raw data value.

For information about the renderer function (passed parameters, etc.), see Ext.grid.ColumnModel.setRenderer. An example of specifying renderer function inline:

var companyColumn = {
   header: 'Company Name',
   dataIndex: 'company',
   renderer: function(value, metaData, record, rowIndex, colIndex, store) {
      // provide the logic depending on business rules
      // name of your own choosing to manipulate the cell depending upon
      // the data in the underlying Record object.
      if (value == 'whatever') {
          //metaData.css : String : A CSS class name to add to the TD element of the cell.
          //metaData.attr : String : An html attribute definition string to apply to
          //                         the data container element within the table
          //                         cell (e.g. 'style="color:red;"').
          metaData.css = 'name-of-css-class-you-will-define';
      }
      return value;
   }
}

See also scope.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Boolean
Optional. ...

Optional. false to disable column resizing. Defaults to true.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Object
Optional. ...

Optional. The scope (this reference) in which to execute the renderer. Defaults to the Column configuration object.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Boolean
Optional. ...

Optional. true if sorting is to be allowed on this column. Defaults to the value of the Ext.grid.ColumnModel.defaultSortable property. Whether local/remote sorting is used is specified in Ext.data.Store.remoteSort.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: String
Optional. ...

Optional. A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the header's HTML title attribute. Defaults to ''.

Available since: Ext JS 3.4.0

Ext.grid.Column
view source
: Number
Optional. ...

Optional. The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured:

Ext.grid.Column
view source
: String
Optional. ...

Optional. A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate renderer to be easily configured into a ColumnModel. The predefined Ext.grid.Column subclass types are:

Configuration properties for the specified xtype may be specified with the Column configuration properties, for example:

var grid = new Ext.grid.GridPanel({
    ...
    columns: [{
        header: 'Last Updated',
        dataIndex: 'lastChange',
        width: 85,
        sortable: true,
        //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
        xtype: 'datecolumn', // use xtype instead of renderer
        format: 'M/d/Y' // configuration property for Ext.grid.DateColumn
    }, {
        ...
    }]
});

Available since: Ext JS 3.4.0

Defined By

Properties

Ext.grid.Column
view source
: Function
Optional. ...

Optional. A function which returns displayable data when passed 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.

Available since: Ext JS 3.4.0

Defined By

Methods

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

Available since: Ext JS 3.4.0

Parameters

  • config : Object

Returns

Fires

    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.Column
      view source
      ( )private
      Clean up. ...

      Clean up. Remove any Editor. Remove any listeners.

      Available since: Ext JS 3.4.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.

        ( 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.Column
          view source
          ( rowIndex ) : Ext.Editor
          Returns the editor defined for this column that was created to wrap the Field used to edit the cell. ...

          Returns the editor defined for this column that was created to wrap the Field used to edit the cell.

          Available since: Ext JS 3.4.0

          Parameters

          • rowIndex : Number

            The row index

          Returns

          Fires

            Ext.grid.Column
            view source
            ( rowIndex )private
            private ...

            private

            Available since: Ext JS 3.4.0

            Parameters

            • rowIndex : Object
            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

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

            Ext.grid.Column
            view source
            ( name, e, grid, rowIndex, colIndex )private
            Process and refire events routed from the GridView's processEvent method. ...

            Process and refire events routed from the GridView's processEvent method. Returns the event handler's status to allow cancelling of GridView's bubbling process.

            Available since: Ext JS 3.4.0

            Parameters

            • name : Object
            • e : Object
            • grid : Object
            • rowIndex : Object
            • colIndex : Object

            Fires

              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.Column
              view source
              ( editor )
              Sets a new editor for this column. ...

              Sets a new editor for this column.

              Available since: Ext JS 3.4.0

              Parameters

              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.Column
              view source
              ( this, The, rowIndex, e )
              Fires when this Column is clicked. ...

              Fires when this Column is clicked.

              Available since: Ext JS 3.4.0

              Parameters

              Ext.grid.Column
              view source
              ( this, The, rowIndex, e )
              Fires when this Column is right clicked. ...

              Fires when this Column is right clicked.

              Available since: Ext JS 3.4.0

              Parameters

              Ext.grid.Column
              view source
              ( this, The, rowIndex, e )
              Fires when this Column is double clicked. ...

              Fires when this Column is double clicked.

              Available since: Ext JS 3.4.0

              Parameters

              Ext.grid.Column
              view source
              ( this, The, rowIndex, e )
              Fires when this Column receives a mousedown event. ...

              Fires when this Column receives a mousedown event.

              Available since: Ext JS 3.4.0

              Parameters