The source code

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

/** +

false

true

/** +

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'));
-                    }
+        // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
+        lb = me.ownerCt.componentLayout.layoutBusy;
+        me.ownerCt.componentLayout.layoutBusy = true;
+        me.callParent(arguments);
+        me.ownerCt.componentLayout.layoutBusy = lb;
+
+        // Notify owning HeaderContainer
+        ownerHeaderCt.onHeaderHide(me);
+
+        if (me.ownerCt.isGroupHeader) {
+            // If we've just hidden the last header in a group, then hide the group
+            items = me.ownerCt.query('>:not([hidden])');
+            if (!items.length) {
+                me.ownerCt.hide();
+            }
+            // Size the group down to accommodate fewer sub headers
+            else {
+                for (i = 0, len = items.length; i < len; i++) {
+                    newWidth += items[i].getWidth();
                 }
-            ]
+                me.ownerCt.minWidth = newWidth;
+                me.ownerCt.setWidth(newWidth);
+            }
         }
-        //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}