/** * @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 appropriatevar 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
*xtype
may 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 * ifvar 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: ** @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}
*