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 = Ext.extend(Object, { - /** - * @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 ofx-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: - *
The new value of the group field.
Unused parameter.
The Record providing the data - * for the row which caused group change.
The row index of the Record which caused group change.
The column index of the group field.
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} dataIndexRequired. 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: - *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.
- *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.
- */ - /** - * @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column. - * Defaults to the value of the{@link Ext.grid.ColumnModel#defaultSortable} property.
- * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}.
- */
- /**
- * @cfg {Boolean} fixed Optional. true if the column width cannot be changed. Defaults to false.
- */
- /**
- * @cfg {Boolean} resizable Optional. false to disable column resizing. Defaults to true.
- */
- /**
- * @cfg {Boolean} menuDisabled Optional. true to disable the column menu. Defaults to false.
- */
- /**
- * @cfg {Boolean} hidden
- * Optional. true to initially hide this column. Defaults to false.
- * A hidden column {@link Ext.grid.GridPanel#enableColumnHide 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.
- */
- /**
- * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips
- * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
- * header's HTML title attribute. Defaults to ''.
- */
- /**
- * @cfg {Mixed} renderer
- * 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: - *
-{
- 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} to be easily
- * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
- * 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}
- }, {
- ...
- }]
-});
- * isColumn is not set ColumnModel will recreate a new Ext.grid.Column
- * Defaults to true.
- */
- isColumn : true,
-
- constructor : 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;
- }
- if(!this.scope){
- this.scope = this;
- }
-
- var ed = this.editor;
- delete this.editor;
- this.setEditor(ed);
- },
-
- /**
- * Optional. A function which returns displayable data when passed the following parameters:
- * The data value for the cell.
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container - * element within the table cell (e.g. 'style="color:red;"').
The {@link Ext.data.Record} from which the data was - * extracted.
Row index
Column index
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.
- */ -Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String} trueText - * The string returned by the renderer when the column value is not falsey (defaults to 'true'). - */ - trueText: 'true', - /** - * @cfg {String} falseText - * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to - * 'false'). - */ - falseText: 'false', - /** - * @cfg {String} undefinedText - * The string returned by the renderer when the column value is undefined (defaults to ' '). - */ - undefinedText: ' ', - - constructor: function(cfg){ - Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg); - var t = this.trueText, f = this.falseText, u = this.undefinedText; - this.renderer = function(v){ - if(v === undefined){ - return u; - } - if(!v || v === 'false'){ - return f; - } - return t; - }; - } -}); - -/** - * @class Ext.grid.NumberColumn - * @extends Ext.grid.Column - *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.
- */ -Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String} format - * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column - * (defaults to '0,000.00'). - */ - format : '0,000.00', - constructor: function(cfg){ - Ext.grid.NumberColumn.superclass.constructor.call(this, cfg); - this.renderer = Ext.util.Format.numberRenderer(this.format); - } -}); - -/** - * @class Ext.grid.DateColumn - * @extends Ext.grid.Column - *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.
- */ -Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String} format - * A formatting string as used by {@link Date#format} to format a Date for this Column - * (defaults to 'm/d/Y'). - */ - format : 'm/d/Y', - constructor: function(cfg){ - Ext.grid.DateColumn.superclass.constructor.call(this, cfg); - this.renderer = Ext.util.Format.dateRenderer(this.format); - } -}); - -/** - * @class Ext.grid.TemplateColumn - * @extends Ext.grid.Column - *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.
- */ -Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, { - /** - * @cfg {String/XTemplate} tpl - * An {@link Ext.XTemplate XTemplate}, or an XTemplate definition string to use to process a - * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value. - */ - constructor: function(cfg){ - Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg); - var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl); - this.renderer = function(value, p, r){ - return tpl.apply(r.data); - }; - this.tpl = tpl; - } -}); - -/* - * @property types - * @type Object - * @member Ext.grid.Column - * @static - *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
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 = Ext.extend(Object, { + /** + * @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 ofx-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: + *
The new value of the group field.
Unused parameter.
The Record providing the data + * for the row which caused group change.
The row index of the Record which caused group change.
The column index of the group field.
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} dataIndexRequired. 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: + *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.
+ *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.
+ */ + /** + * @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column. + * Defaults to the value of the{@link Ext.grid.ColumnModel#defaultSortable} property.
+ * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}.
+ */
+ /**
+ * @cfg {Boolean} fixed Optional. true if the column width cannot be changed. Defaults to false.
+ */
+ /**
+ * @cfg {Boolean} resizable Optional. false to disable column resizing. Defaults to true.
+ */
+ /**
+ * @cfg {Boolean} menuDisabled Optional. true to disable the column menu. Defaults to false.
+ */
+ /**
+ * @cfg {Boolean} hidden
+ * Optional. true to initially hide this column. Defaults to false.
+ * A hidden column {@link Ext.grid.GridPanel#enableColumnHide 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.
+ */
+ /**
+ * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips
+ * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
+ * header's HTML title attribute. Defaults to ''.
+ */
+ /**
+ * @cfg {Mixed} renderer
+ * 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: + *
+{
+ 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} to be easily
+ * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
+ * 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}
+ }, {
+ ...
+ }]
+});
+ * isColumn is not set ColumnModel will recreate a new Ext.grid.Column
+ * Defaults to true.
+ */
+ isColumn : true,
+
+ constructor : 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;
+ }
+ if(!this.scope){
+ this.scope = this;
+ }
+
+ var ed = this.editor;
+ delete this.editor;
+ this.setEditor(ed);
+ },
+
+ /**
+ * Optional. A function which returns displayable data when passed the following parameters:
+ * The data value for the cell.
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container + * element within the table cell (e.g. 'style="color:red;"').
The {@link Ext.data.Record} from which the data was + * extracted.
Row index
Column index
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.
+ */ +Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String} trueText + * The string returned by the renderer when the column value is not falsey (defaults to 'true'). + */ + trueText: 'true', + /** + * @cfg {String} falseText + * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to + * 'false'). + */ + falseText: 'false', + /** + * @cfg {String} undefinedText + * The string returned by the renderer when the column value is undefined (defaults to ' '). + */ + undefinedText: ' ', + + constructor: function(cfg){ + Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg); + var t = this.trueText, f = this.falseText, u = this.undefinedText; + this.renderer = function(v){ + if(v === undefined){ + return u; + } + if(!v || v === 'false'){ + return f; + } + return t; + }; + } +}); + +/** + * @class Ext.grid.NumberColumn + * @extends Ext.grid.Column + *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.
+ */ +Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String} format + * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column + * (defaults to '0,000.00'). + */ + format : '0,000.00', + constructor: function(cfg){ + Ext.grid.NumberColumn.superclass.constructor.call(this, cfg); + this.renderer = Ext.util.Format.numberRenderer(this.format); + } +}); + +/** + * @class Ext.grid.DateColumn + * @extends Ext.grid.Column + *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.
+ */ +Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String} format + * A formatting string as used by {@link Date#format} to format a Date for this Column + * (defaults to 'm/d/Y'). + */ + format : 'm/d/Y', + constructor: function(cfg){ + Ext.grid.DateColumn.superclass.constructor.call(this, cfg); + this.renderer = Ext.util.Format.dateRenderer(this.format); + } +}); + +/** + * @class Ext.grid.TemplateColumn + * @extends Ext.grid.Column + *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.
+ */ +Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String/XTemplate} tpl + * An {@link Ext.XTemplate XTemplate}, or an XTemplate definition string to use to process a + * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value. + */ + constructor: function(cfg){ + Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg); + var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl); + this.renderer = function(value, p, r){ + return tpl.apply(r.data); + }; + this.tpl = tpl; + } +}); + +/* + * @property types + * @type Object + * @member Ext.grid.Column + * @static + *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