The source code

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

/** +

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;
-   }
+    menuDisabled: false,
+
+    /**
+     * @cfg {Function} renderer
+     * <p>A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it
+     * is rendered. Example:</p>
+     * <pre><code>{
+    renderer: function(value){
+        if (value === 1) {
+            return '1 person';
+        }
+        return value + ' people';
+    }
 }
-     *

{@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

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}