Properties

Methods

Events

Config Options

Direct Link

Column  ActionColumn

Class Ext.grid.ActionColumn

Package:	Ext.grid
Defined In:	Column.js
Class:	ActionColumn
Extends:	Column

A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click handler for each icon. Example usage:

new Ext.grid.GridPanel({
    store: myStore,
    columns: [
        {
            xtype: 'actioncolumn',
            width: 50,
            items: [
                {
                    icon   : 'sell.gif',                // Use a URL in the icon config
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert("Sell " + rec.get('company'));
                    }
                },
                {
                    getClass: function(v, meta, rec) {  // Or return a class from a function
                        if (rec.get('change') < 0) {
                            this.items[1].tooltip = 'Do not buy!';
                            return 'alert-col';
                        } else {
                            this.items[1].tooltip = 'Buy stock';
                            return 'buy-col';
                        }
                    },
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert("Buy " + rec.get('company'));
                    }
                }
            ]
        }
        //any other columns here
    ]
});

The action column can be at any index in the columns array, and a grid can have any number of action columns.

Config Options

Config Options		Defined By
	align : String Optional. Set the CSS text-align property of the column. Defaults to undefined.	Column
	altText : String The alt text to use for the image element. Defaults to `''`.	ActionColumn
	css : String Optional. An inline style definition string which is applied to all table cells in the column (excluding headers). De... Optional. An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.	Column
	dataIndex : String Required. The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the colu... 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.	Column
	editable : Boolean Optional. Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column... 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().	Column
	editor : Ext.form.Field Optional. The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See edita... Optional. The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See `editable` also.	Column
	emptyGroupText : String Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text to d... 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.	Column
	fixed : Boolean Optional. `true` if the column width cannot be changed. Defaults to `false`.	Column
	getClass : Function A function which returns the CSS class to apply to the icon image. The function is passed the following parameters: v... A function which returns the CSS class to apply to the icon image. The function is passed the following parameters: v : Object The value of the column's configured field (if any). 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;"'). r : Ext.data.Record The Record providing the data. rowIndex : Number The row index.. colIndex : Number The column index. store : Ext.data.Store The Store which is providing the data Model.	ActionColumn
	groupName : String Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text with... 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.	Column
	groupRenderer : Function Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function ... 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.	Column
	groupable : Boolean Optional. If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to disable the header me... 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`.	Column
	handler : Function A function called when the icon is clicked. The handler is passed the following parameters:<div class="mdetail-params... A function called when the icon is clicked. The handler is passed the following parameters: `grid` : GridPanel The owning GridPanel. `rowIndex` : Number The row index clicked on. `colIndex` : Number The column index clicked on. `item` : Object The clicked item (or this Column if multiple items were not configured). `e` : Event The click event.	ActionColumn
	header : String Optional. The header text to be used as innerHTML (html tags are accepted) to display in the Grid view. Note: to hav... 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 `' '`.	Column
	hidden : Boolean Optional. true to initially hide this column. Defaults to false. A hidden column may be shown via the header row menu... 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.	Column
	hideable : Boolean Optional. Specify as false to prevent the user from hiding this column (defaults to true). To disallow column hiding... 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.	Column
	icon : String The URL of an image to display as the clickable element in the column. Optional - defaults to `Ext.BLANK_IMAGE_URL`.	ActionColumn
	iconCls : String A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a getClass func... A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a `getClass` function.	ActionColumn
	id : String Optional. A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to ... 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.	Column
	items : Array An Array which may contain multiple icon definitions, each element of which may contain: <div class="mdetail-params">... An Array which may contain multiple icon definitions, each element of which may contain: `icon` : String The url of an image to display as the clickable element in the column. `iconCls` : String A CSS class to apply to the icon image. To determine the class dynamically, configure the item with a `getClass` function. `getClass` : Function A function which returns the CSS class to apply to the icon image. The function is passed the following parameters: v : Object The value of the column's configured field (if any). 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;"'). r : Ext.data.Record The Record providing the data. rowIndex : Number The row index.. colIndex : Number The column index. store : Ext.data.Store The Store which is providing the data Model. `handler` : Function A function called when the icon is clicked. `scope` : Scope The scope (`this` reference) in which the `handler` and `getClass` functions are executed. Fallback defaults are this Column's configured scope, then this Column. `tooltip` : String A tooltip message to be displayed on hover. Ext.QuickTips must have been initialized.	ActionColumn
	menuDisabled : Boolean Optional. `true` to disable the column menu. Defaults to `false`.	Column
	renderer : Mixed For an alternative to specifying a renderer see xtype Optional. A renderer is an 'interceptor' method which can be us... 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.	Column
	resizable : Boolean Optional. `false` to disable column resizing. Defaults to `true`.	Column
	scope : Object The scope (`this` reference) in which the `handler` and `getClass` fuctions are executed. Defaults to this Column.	ActionColumn
	sortable : Boolean Optional. true if sorting is to be allowed on this column. Defaults to the value of the Ext.grid.ColumnModel.defaultS... 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`.	Column
	stopSelection : Boolean Defaults to `true`. Prevent grid row selection upon mousedown.	ActionColumn
	tooltip : String A tooltip message to be displayed on hover. Ext.QuickTips must have been initialized.	ActionColumn
	width : Number Optional. The initial width in pixels of the column. The width of each column can also be affected if any of the foll... 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.GridPanel.`autoExpandColumn` Ext.grid.GridView.`forceFit` By specifying `forceFit:true`, non-fixed width columns will be re-proportioned (based on the relative initial widths) to fill the width of the grid so that no horizontal scrollbar is shown. Ext.grid.GridView.`autoFill` Ext.grid.GridPanel.`minColumnWidth` Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.`scrollOffset` can be modified to reduce or eliminate the reserved offset.	Column
	xtype : String Optional. A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropr... 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: `gridcolumn` : Ext.grid.Column (Default) `booleancolumn` : Ext.grid.BooleanColumn `numbercolumn` : Ext.grid.NumberColumn `datecolumn` : Ext.grid.DateColumn `templatecolumn` : Ext.grid.TemplateColumn 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 }, { ... }] });`	Column

Public Properties

Property		Defined By
	renderer : Function Optional. A function which returns displayable data when passed the following parameters: <div class="mdetail-params"... 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.	Column

Public Methods

Method		Defined By
	getCellEditor( `Number 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. Parameters: `rowIndex` : Number The row index Returns: `Ext.Editor`	Column
	setEditor( `Ext.Editor/Ext.form.Field editor` ) : void Sets a new editor for this column. Sets a new editor for this column. Parameters: `editor` : Ext.Editor/Ext.form.Field The editor to set Returns: void	Column

Public Events

Event		Defined By
	click : ( `Column this`, `Grid The`, `Number rowIndex`, `Ext.EventObject e` ) Fires when this Column is clicked. Fires when this Column is clicked. Listeners will be called with the following arguments: `this` : Column `The` : Grid owning GridPanel `rowIndex` : Number `e` : Ext.EventObject	Column
	contextmenu : ( `Column this`, `Grid The`, `Number rowIndex`, `Ext.EventObject e` ) Fires when this Column is right clicked. Fires when this Column is right clicked. Listeners will be called with the following arguments: `this` : Column `The` : Grid owning GridPanel `rowIndex` : Number `e` : Ext.EventObject	Column
	dblclick : ( `Column this`, `Grid The`, `Number rowIndex`, `Ext.EventObject e` ) Fires when this Column is double clicked. Fires when this Column is double clicked. Listeners will be called with the following arguments: `this` : Column `The` : Grid owning GridPanel `rowIndex` : Number `e` : Ext.EventObject	Column
	mousedown : ( `Column this`, `Grid The`, `Number rowIndex`, `Ext.EventObject e` ) Fires when this Column receives a mousedown event. Fires when this Column receives a mousedown event. Listeners will be called with the following arguments: `this` : Column `The` : Grid owning GridPanel `rowIndex` : Number `e` : Ext.EventObject	Column