Clear Up
SharpKit Reference

Column Class

This class specifies the definition for a column inside a Ext.grid.Panel. It encompasses both the grid header configuration as well as displaying data within the grid itself. If the columns configuration is specified, this column will become a column group and can contain other columns inside. In general, this class will not be created directly, rather an array of column configurations will be passed to the grid:

    Ext.create('', {
            fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
            {firstname:"Michael", lastname:"Scott", seniority:7, dep:"Management", hired:"01/10/2004"},
            {firstname:"Dwight", lastname:"Schrute", seniority:2, dep:"Sales", hired:"04/01/2004"},
            {firstname:"Jim", lastname:"Halpert", seniority:3, dep:"Sales", hired:"02/22/2006"},
            {firstname:"Kevin", lastname:"Malone", seniority:4, dep:"Accounting", hired:"06/10/2007"},
            {firstname:"Angela", lastname:"Martin", seniority:5, dep:"Accounting", hired:"10/21/2008"}
            Ext.create('Ext.grid.Panel', {
            title: 'Column Demo',
            columns: [
            {text: 'First Name',  dataIndex:'firstname'},
            {text: 'Last Name',  dataIndex:'lastname'},
            {text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},
            {text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({seniority})'}
            width: 400,
            forceFit: true,
            renderTo: Ext.getBody()

Convenience Subclasses

There are several column subclasses that provide default rendering for various data types

  • Ext.grid.column.Action: Renders icons that can respond to click events inline
  • Ext.grid.column.Boolean: Renders for boolean values
  • Ext.grid.column.Date: Renders for date values
  • Ext.grid.column.Number: Renders for numeric values
  • Ext.grid.column.Template: Renders a value using an Ext.XTemplate using the record data

Setting Sizes

The columns are laid out by a Ext.layout.container.HBox layout, so a column can either be given an explicit width value or a flex configuration. If no width is specified the grid will automatically the size the column to 100px. For column groups, the size is calculated by measuring the width of the child columns, so a width option should not be specified in that case.

Header Options

  • text: Sets the header text for the column
  • sortable: Specifies whether the column can be sorted by clicking the header or using the column menu
  • hideable: Specifies whether the column can be hidden using the column menu
  • menuDisabled: Disables the column header menu
  • draggable: Specifies whether the column header can be reordered by dragging
  • groupable: Specifies whether the grid can be grouped by the column dataIndex. See also Ext.grid.feature.Grouping

Data Options

  • dataIndex: The dataIndex is the field in the underlying to use as the value for the column.
  • renderer: Allows the underlying store value to be transformed before being displayed in the grid

Namespace: Ext.grid.column



Name Description
align Sets the alignment of the header and rendered columns. Possible values are: 'left', 'center', and 'right'. Defaults to: "left"
columns An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the columns config. Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out of a group. Note that if all sub columns are dragged out of a group, the group is destroyed.
dataIndex The name of the field in the grid's's definition from which to draw the column's value. Required. Defaults to: null
editor An optional xtype or config object for a Field to use for editing. Only applicable if the grid is using an Editing plugin.
editRenderer A renderer to be used in conjunction with RowEditing. This renderer is used to display a custom value for non-editable fields. Defaults to: false
emptyCellText The text to diplay in empty cells (cells with a value of undefined, null, or ''). Defaults to   aka  .
field Alias for editor.

This cfg has been deprecated since 4.0.5

Use editor instead.

fixed True to prevent the column from being resizable.

This cfg has been deprecated since 4.0

Use resizable instead.

groupable If the grid uses a Ext.grid.feature.Grouping, this option may be used to disable the header menu item to group by the column selected. By default, the header menu group option is enabled. Set to false to disable (but still show) the group option in the header menu for the column.
header The header text.

This cfg has been deprecated since 4.0

Use text instead.

hideable False to prevent the user from hiding this column. Defaults to: true
locked True to lock this column in place. Implicitly enables locking on the grid. See also Ext.grid.Panel.enableLocking. Defaults to: false
menuDisabled True to disable the column header menu containing sort/hide options. Defaults to: false
menuText The text to render in the column visibility selection menu for this column. If not specified, will default to the text value. Defaults to: null
renderer A renderer is an 'interceptor' method which can be used to transform data (value, appearance, etc.) before it is rendered. Example:
            renderer: function(value){
            if (value === 1) {
            return '1 person';
            return value + ' people';
Additionally a string naming an Ext.util.Format method can be passed:
            renderer: 'uppercase'
Defaults to: false
  • value : Object

    The data value for the current cell

  • metaData : Object

    A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style.

  • record :

    The record for the current row

  • rowIndex : Number

    The index of the current row

  • colIndex : Number

    The index of the current column

  • store :

    The data store

  • view : Ext.view.View

    The current view

  • scope The scope to use when calling the renderer function.
    tdCls A CSS class names to apply to the table cells for this column.
    text The header text to be used as innerHTML (html tags are accepted) to display in the Grid. Note: to have a clickable header with no text displayed you can use the default of   aka  . Defaults to: " "
    tooltip A tooltip to display for this column header
    tooltipType The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute. Defaults to: "qtip"


    Name Description
    defaultRenderer() When defined this will take precedence over the renderer config. This is meant to be defined in subclasses that wish to supply their own renderer.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    getEditor(object, object) Retrieves the editing field for editing associated with this header. Returns false if there is no field associated with the Header the method will return false. If the field has not been instantiated it will be created. Note: These methods only has an implementation if a Editing plugin has been enabled on the grid.
    getIndex() Returns the index of this column only if this column is a base level Column. If it is a group column, it returns false.
    getSortParam() Returns the parameter to sort upon when sorting this header. By default this returns the dataIndex and will not need to be overriden in most cases.
    getVisibleIndex() Returns the index of this column in the list of visible columns only if this column is a base level Column. If it is a group column, it returns false.
    setEditor(object) Sets the form field to be used for editing. Note: This method only has an implementation if an Editing plugin has been enabled on the grid.
    setText(JsString) Sets the header text for this Column.


    Name Description
    isHeader Set in this class to identify, at runtime, instances which are not instances of the HeaderContainer base class, but are in fact, the subclass: Header. Defaults to: true
    textEl Element that contains the text in column header.
    triggerEl Element that acts as button for column header dropdown menu.
    © Copyright 2005-2011 SharpKit. All rights reserved.