/** - * @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 = 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 classx-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} groupRendererOptional. 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} 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: - *- *
- {@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.
- */ - /** - * @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: - *
- * If not specified, the default renderer uses the raw data value. - *- *
- 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:
- * 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-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: - *- *- *
- 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
- *xtypemay be specified with - * the Column configuration properties, for example:- */ - /** - * @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-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} - }, { - ... - }] -}); - *isColumnis 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: - *- * @property renderer - * @type Function - */ - renderer : function(value){ - if(Ext.isString(value) && value.length < 1){ - return ' '; - } - return value; - }, - - // private - getEditor: function(rowIndex){ - return this.editable !== false ? this.editor : null; - }, - - /** - * Sets a new editor for this column. - * @param {Ext.Editor/Ext.form.Field} editor The editor to set - */ - setEditor : function(editor){ - if(this.editor){ - this.editor.destroy(); - } - this.editor = null; - if(editor){ - //not an instance, create it - if(!editor.isXType){ - editor = Ext.create(editor, 'textfield'); - } - //check if it's wrapped in an editor - if(!editor.startEdit){ - editor = new Ext.grid.GridEditor(editor); - } - this.editor = editor; - } - }, - - destroy : function(){ - this.setEditor(null); - }, - - /** - * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field} - * used to edit the cell. - * @param {Number} rowIndex The row index - * @return {Ext.Editor} - */ - getCellEditor: function(rowIndex){ - return this.getEditor(rowIndex); - } -}); - -/** - * @class Ext.grid.BooleanColumn - * @extends Ext.grid.Column - *- *
- 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.
- */ -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
- */ -Ext.grid.Column.types = { - gridcolumn : Ext.grid.Column, - booleancolumn: Ext.grid.BooleanColumn, - numbercolumn: Ext.grid.NumberColumn, - datecolumn: Ext.grid.DateColumn, - templatecolumn: Ext.grid.TemplateColumn -}; - + + + +- *
- 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}
- *The source code + + + + +/*! + * Ext JS Library 3.2.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.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 = 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 classx-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} groupRendererOptional. 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} 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: + *+ *
- {@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.
+ */ + /** + * @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: + *
+ * If not specified, the default renderer uses the raw data value. + *+ *
- 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:
+ * 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+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: + *+ *+ *
- 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
+ *xtypemay be specified with + * the Column configuration properties, for example:+ */ + /** + * @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+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} + }, { + ... + }] +}); + *isColumnis 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: + *+ * @property renderer + * @type Function + */ + renderer : function(value){ + if(Ext.isString(value) && value.length < 1){ + return ' '; + } + return value; + }, + + // private + getEditor: function(rowIndex){ + return this.editable !== false ? this.editor : null; + }, + + /** + * Sets a new editor for this column. + * @param {Ext.Editor/Ext.form.Field} editor The editor to set + */ + setEditor : function(editor){ + var ed = this.editor; + if(ed){ + if(ed.gridEditor){ + ed.gridEditor.destroy(); + delete ed.gridEditor; + }else{ + ed.destroy(); + } + } + this.editor = null; + if(editor){ + //not an instance, create it + if(!editor.isXType){ + editor = Ext.create(editor, 'textfield'); + } + this.editor = editor; + } + }, + + /** + * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field} + * used to edit the cell. + * @param {Number} rowIndex The row index + * @return {Ext.Editor} + */ + getCellEditor: function(rowIndex){ + var ed = this.getEditor(rowIndex); + if(ed){ + if(!ed.startEdit){ + if(!ed.gridEditor){ + ed.gridEditor = new Ext.grid.GridEditor(ed); + } + ed = ed.gridEditor; + } + } + return ed; + } +}); + +/** + * @class Ext.grid.BooleanColumn + * @extends Ext.grid.Column + *+ *
- 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.
+ */ +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
+ */ +Ext.grid.Column.types = { + gridcolumn : Ext.grid.Column, + booleancolumn: Ext.grid.BooleanColumn, + numbercolumn: Ext.grid.NumberColumn, + datecolumn: Ext.grid.DateColumn, + templatecolumn: Ext.grid.TemplateColumn +}; + \ No newline at end of file+ *
- 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}
+ *