The source code

/** - * @class Ext.grid.Column - *

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.

- */ -Ext.grid.Column = function(config){ - Ext.apply(this, config); - - if(Ext.isString(this.renderer)){ - this.renderer = Ext.util.Format[this.renderer]; - } else if(Ext.isObject(this.renderer)){ - this.scope = this.renderer.scope; - this.renderer = this.renderer.fn; - } - this.renderer = this.renderer.createDelegate(this.scope || config); - - if(this.editor){ - this.editor = Ext.create(this.editor, 'textfield'); - } -}; - -Ext.grid.Column.prototype = { -

/** - * @cfg {Boolean} editable Optional. Defaults to true, enabling the configured - * {@link #editor}. Set to false to initially disable editing on this column. - * The initial configuration may be dynamically altered using - * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}. - */ -

/** - * @cfg {String} id 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 {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this - * unique identifier. - */ -

/** - * @cfg {String} header 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 ' '. - */ -

/** - * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link 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 {@link #groupName}. - */ -

/** - * @cfg {String} groupName Optional. If the grid is being rendered by an {@link 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 {@link #groupRenderer} and - * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}. - */ -

/** - * @cfg {Function} groupRenderer

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.

- *

The function should return a string value.

- */ -

/** - * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option - * may be used to specify the text to display when there is an empty group value. Defaults to the - * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}. - */ -

/** - * @cfg {String} dataIndex

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.

- */ -

/** - * @cfg {Number} width - * 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: - *

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

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

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}