-
- *
- {@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} - *
- 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 -} -
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: - *
-
- *
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:
- * -
- *
- gridcolumn : {@link Ext.grid.Column} (Default) - *
- booleancolumn : {@link Ext.grid.BooleanColumn} - *
- numbercolumn : {@link Ext.grid.NumberColumn} - *
- datecolumn : {@link Ext.grid.DateColumn} - *
- templatecolumn : {@link Ext.grid.TemplateColumn} - *
Configuration properties for the specified xtype may be specified with
- * the Column configuration properties, for example:
-var grid = new Ext.grid.GridPanel({
- ...
- columns: [{
- header: 'Last Updated',
- dataIndex: 'lastChange',
- width: 85,
- sortable: true,
- //renderer: Ext.util.Format.dateRenderer('m/d/Y'),
- xtype: 'datecolumn', // use xtype instead of renderer
- format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
- }, {
- ...
- }]
-});
- * 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:
- * -
- *
- 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;"').
- * - css : String
- 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 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: GridPanelThe owning GridPanel.
- * rowIndex: NumberThe row index clicked on.
- * colIndex: NumberThe column index clicked on.
- * item: ObjectThe clicked item (or this Column if multiple - * {@link #items} were not configured).
- * e: EventThe click 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:-
- *
- v : Object
The value of the column's configured field (if any).
- * - 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;"').
- *
- * - css : String
- r : Ext.data.Record
The Record providing the data.
- * - rowIndex : Number
The row index..
- * - colIndex : Number
The column index.
- * - store : Ext.data.Store
The Store which is providing the data Model.
- *
-
- *
icon: StringThe url of an image to display as the clickable element - * in the column.
- * iconCls: StringA CSS class to apply to the icon image. - * To determine the class dynamically, configure the item with agetClassfunction.
- * getClass: FunctionA function which returns the CSS class to apply to the icon image. - * The function is passed the following parameters:-
- *
- v : Object
The value of the column's configured field (if any).
- * - 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;"').
- *
- * - css : String
- r : Ext.data.Record
The Record providing the data.
- * - rowIndex : Number
The row index..
- * - colIndex : Number
The column index.
- * - store : Ext.data.Store
The Store which is providing the data Model.
- *
- * - v : Object
handler: FunctionA function called when the icon is clicked.
- * scope: ScopeThe scope (thisreference) in which the - *handlerandgetClassfunctions are executed. Fallback defaults are this Column's - * configured scope, then this Column.
- * tooltip: StringA tooltip message to be displayed on hover. - * {@link Ext.QuickTips#init Ext.QuickTips} must have been initialized.
- *
An object containing predefined Column classes keyed by a mnemonic code which may be referenced - * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.
- *This contains the following properties
-
- *
- gridcolumn : {@link Ext.grid.Column Column constructor} - *
- booleancolumn : {@link Ext.grid.BooleanColumn BooleanColumn constructor} - *
- numbercolumn : {@link Ext.grid.NumberColumn NumberColumn constructor} - *
- datecolumn : {@link Ext.grid.DateColumn DateColumn constructor} - *
- templatecolumn : {@link Ext.grid.TemplateColumn TemplateColumn constructor} - *