The source code

{@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}
{@link Ext.grid.GridView}.{@link Ext.grid.GridView#forceFit forceFit} - *
- *
By specifying forceFit:true, {@link #fixed 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.
- *
{@link Ext.grid.GridView}.{@link Ext.grid.GridView#autoFill autoFill}
{@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}

Note: when the width of each column is determined, a space on the right side - * is reserved for the vertical scrollbar. The - * {@link Ext.grid.GridView}.{@link Ext.grid.GridView#scrollOffset scrollOffset} - * can be modified to reduce or eliminate the reserved offset.

true

false

true

false

true

false

For an alternative to specifying a renderer see {@link #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 {@link 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
-}
-
```

For information about the renderer function (passed parameters, etc.), see - * {@link 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;
-   }
-}
-     *

{@link #renderer}

gridcolumn : {@link Ext.grid.Column} (Default)
booleancolumn : {@link Ext.grid.BooleanColumn}
numbercolumn : {@link Ext.grid.NumberColumn}
datecolumn : {@link Ext.grid.DateColumn}
templatecolumn : {@link 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 {@link Ext.grid.DateColumn}
-    }, {
-        ...
-    }]
-});
-     *

this

false

{@link #editable}

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 {@link Ext.data.Record} from which the data was - * extracted.
rowIndex : Number
Row index
colIndex : Number
Column index
store : Ext.data.Store
The {@link Ext.data.Store} object from which the Record - * was extracted.

A Column definition class which renders boolean data fields. See the {@link Ext.grid.ColumnModel#xtype xtype} - * config option of {@link Ext.grid.ColumnModel} for more details.

'true'

'false'

' '

A Column definition class which renders a numeric data field according to a {@link #format} string. See the - * {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more details.

'0,000.00'

A Column definition class which renders a passed date according to the default locale, or a configured - * {@link #format}. See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} - * for more details.

'm/d/Y'

A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s - * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}. - * See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more - * details.

definition string

An object containing predefined Column classes keyed by a mnemonic code which may be referenced - * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.

This contains the following properties

gridcolumn : {@link Ext.grid.Column Column constructor}
booleancolumn : {@link Ext.grid.BooleanColumn BooleanColumn constructor}
numbercolumn : {@link Ext.grid.NumberColumn NumberColumn constructor}
datecolumn : {@link Ext.grid.DateColumn DateColumn constructor}
templatecolumn : {@link Ext.grid.TemplateColumn TemplateColumn constructor}

This class encapsulates column configuration data to be used in the initialization of a + * {@link Ext.grid.ColumnModel 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.

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

The called function (either the groupRenderer or {@link #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.

Required. The name of the field in the + * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from + * which to draw the column's value.

{@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}
{@link Ext.grid.GridView}.{@link Ext.grid.GridView#forceFit forceFit} + *
+ *
By specifying forceFit:true, {@link #fixed 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.
+ *
{@link Ext.grid.GridView}.{@link Ext.grid.GridView#autoFill autoFill}
{@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}

Note: when the width of each column is determined, a space on the right side + * is reserved for the vertical scrollbar. The + * {@link Ext.grid.GridView}.{@link Ext.grid.GridView#scrollOffset scrollOffset} + * can be modified to reduce or eliminate the reserved offset.

true

{@link Ext.grid.ColumnModel#defaultSortable}

{@link Ext.data.Store#remoteSort}

true

false

true

false

true

false

For an alternative to specifying a renderer see {@link #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 {@link 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
+}
+
```

For information about the renderer function (passed parameters, etc.), see + * {@link 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;
+   }
+}
+     *

{@link #renderer}

gridcolumn : {@link Ext.grid.Column} (Default)
booleancolumn : {@link Ext.grid.BooleanColumn}
numbercolumn : {@link Ext.grid.NumberColumn}
datecolumn : {@link Ext.grid.DateColumn}
templatecolumn : {@link 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 {@link Ext.grid.DateColumn}
+    }, {
+        ...
+    }]
+});
+     *

this

false

{@link #editable}

isColumn

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 {@link Ext.data.Record} from which the data was + * extracted.
rowIndex : Number
Row index
colIndex : Number
Column index
store : Ext.data.Store
The {@link Ext.data.Store} object from which the Record + * was extracted.

A Column definition class which renders boolean data fields. See the {@link Ext.grid.Column#xtype xtype} + * config option of {@link Ext.grid.Column} for more details.

'true'

'false'

' '

A Column definition class which renders a numeric data field according to a {@link #format} string. See the + * {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.

'0,000.00'

A Column definition class which renders a passed date according to the default locale, or a configured + * {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} + * for more details.

'm/d/Y'

A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s + * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}. + * See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more + * details.

definition string

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.

{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}

{@link #getClass}

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 + * {@link #items} were not configured).
e : Event
The click event.

this

{@link #handler}

{@link #getClass}

true

row

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.

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. + * {@link Ext.QuickTips#init Ext.QuickTips} must have been initialized.

''

An object containing predefined Column classes keyed by a mnemonic code which may be referenced + * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.

This contains the following properties

gridcolumn : {@link Ext.grid.Column Column constructor}
booleancolumn : {@link Ext.grid.BooleanColumn BooleanColumn constructor}
numbercolumn : {@link Ext.grid.NumberColumn NumberColumn constructor}
datecolumn : {@link Ext.grid.DateColumn DateColumn constructor}
templatecolumn : {@link Ext.grid.TemplateColumn TemplateColumn constructor}