X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/src/widgets/grid/Column.js diff --git a/src/widgets/grid/Column.js b/src/widgets/grid/Column.js index 12d1bc5c..81d6dea9 100644 --- a/src/widgets/grid/Column.js +++ b/src/widgets/grid/Column.js @@ -1,411 +1,674 @@ /*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */ -/** - * @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 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;
- }
-}
- *
- * See also {@link #scope}.
- */
- /**
- * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
- * type which is preconfigured with an appropriate {@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}
- }, {
- ...
- }]
-});
- *
- */
- /**
- * @cfg {Object} scope Optional. The scope (this reference) in which to execute the
- * renderer. Defaults to the Column configuration object.
- */
- /**
- * @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined.
- */
- /**
- * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
- * (excluding headers). Defaults to undefined.
- */
- /**
- * @cfg {Boolean} hideable Optional. Specify as false to prevent the user from hiding this column
- * (defaults to true). To disallow column hiding globally for all columns in the grid, use
- * {@link Ext.grid.GridPanel#enableColumnHide} instead.
- */
- /**
- * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
- * if editing is supported by the grid. See {@link #editable} also.
- */
-
- /**
- * @private
- * @cfg {Boolean} isColumn
- * Used by ColumnModel setConfig method to avoid reprocessing a Column
- * if isColumn
is not set ColumnModel will recreate a new Ext.grid.Column
- * Defaults to true.
- */
- isColumn : true,
-
- /**
- * 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.isObject(this.tpl) ? 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(Ext.util.Observable, { + /** + * @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;
+ }
+}
+ *
+ * See also {@link #scope}.
+ */
+ /**
+ * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
+ * type which is preconfigured with an appropriate {@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}
+ }, {
+ ...
+ }]
+});
+ *
+ */
+ /**
+ * @cfg {Object} scope Optional. The scope (this reference) in which to execute the
+ * renderer. Defaults to the Column configuration object.
+ */
+ /**
+ * @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined.
+ */
+ /**
+ * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
+ * (excluding headers). Defaults to undefined.
+ */
+ /**
+ * @cfg {Boolean} hideable Optional. Specify as false to prevent the user from hiding this column
+ * (defaults to true). To disallow column hiding globally for all columns in the grid, use
+ * {@link Ext.grid.GridPanel#enableColumnHide} instead.
+ */
+ /**
+ * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
+ * if editing is supported by the grid. See {@link #editable} also.
+ */
+
+ /**
+ * @private
+ * @cfg {Boolean} isColumn
+ * Used by ColumnModel setConfig method to avoid reprocessing a Column
+ * if 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);
+ this.addEvents(
+ /**
+ * @event click
+ * Fires when this Column is clicked.
+ * @param {Column} this
+ * @param {Grid} The owning GridPanel
+ * @param {Number} rowIndex
+ * @param {Ext.EventObject} e
+ */
+ 'click',
+ /**
+ * @event contextmenu
+ * Fires when this Column is right clicked.
+ * @param {Column} this
+ * @param {Grid} The owning GridPanel
+ * @param {Number} rowIndex
+ * @param {Ext.EventObject} e
+ */
+ 'contextmenu',
+ /**
+ * @event dblclick
+ * Fires when this Column is double clicked.
+ * @param {Column} this
+ * @param {Grid} The owning GridPanel
+ * @param {Number} rowIndex
+ * @param {Ext.EventObject} e
+ */
+ 'dblclick',
+ /**
+ * @event mousedown
+ * Fires when this Column receives a mousedown event.
+ * @param {Column} this
+ * @param {Grid} The owning GridPanel
+ * @param {Number} rowIndex
+ * @param {Ext.EventObject} e
+ */
+ 'mousedown'
+ );
+ Ext.grid.Column.superclass.constructor.call(this);
+ },
+
+ /**
+ * @private
+ * Process and refire events routed from the GridView's processEvent method.
+ * Returns the event handler's status to allow cancelling of GridView's bubbling process.
+ */
+ processEvent : function(name, e, grid, rowIndex, colIndex){
+ return this.fireEvent(name, this, grid, rowIndex, e);
+ },
+
+ /**
+ * @private
+ * Clean up. Remove any Editor. Remove any listeners.
+ */
+ destroy: function() {
+ if(this.setEditor){
+ this.setEditor(null);
+ }
+ this.purgeListeners();
+ },
+
+ /**
+ * 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 falsy (defaults to 'true'). + */ + trueText: 'true', + /** + * @cfg {String} falseText + * The string returned by the renderer when the column value is falsy (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; + } +}); + +/** + * @class Ext.grid.ActionColumn + * @extends Ext.grid.Column + *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.
+ */ +Ext.grid.ActionColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String} icon + * The URL of an image to display as the clickable element in the column. + * Optional - defaults to{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}
.
+ */
+ /**
+ * @cfg {String} iconCls
+ * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a {@link #getClass}
function.
+ */
+ /**
+ * @cfg {Function} handler A function called when the icon is clicked.
+ * The handler is passed the following parameters:grid
: GridPanelrowIndex
: NumbercolIndex
: Numberitem
: Objecte
: Event{@link #handler}
+ * and {@link #getClass}
fuctions are executed. Defaults to this Column.
+ */
+ /**
+ * @cfg {String} tooltip A tooltip message to be displayed on hover. {@link Ext.QuickTips#init Ext.QuickTips} must have
+ * been initialized.
+ */
+ /**
+ * @cfg {Boolean} stopSelection Defaults to true
. Prevent grid row selection upon mousedown.
+ */
+ /**
+ * @cfg {Function} getClass A function which returns the CSS class to apply to the icon image.
+ * The function is passed the following parameters:The value of the column's configured field (if any).
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 Record providing the data.
The row index..
The column index.
The Store which is providing the data Model.
icon
: StringiconCls
: StringgetClass
function.getClass
: FunctionThe value of the column's configured field (if any).
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 Record providing the data.
The row index..
The column index.
The Store which is providing the data Model.
handler
: Functionscope
: Scopethis
reference) in which the
+ * handler
and getClass
functions are executed. Fallback defaults are this Column's
+ * configured scope, then this Column.tooltip
: StringAn 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