-
- *
- {@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;
- }
-
- if(this.editor){
- this.editor = Ext.create(this.editor, 'textfield');
- }
- },
-
- /**
- * 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 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
-
- *
- 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} - *
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: + *
-
+ *
- 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} + *
- 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} + *