/*! - * Ext JS Library 3.2.2 + * Ext JS Library 3.3.0 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license @@ -19,7 +19,7 @@ *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, { +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. @@ -39,7 +39,7 @@ Ext.grid.Column = Ext.extend(Object, { /** * @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 ' '. + * 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 @@ -241,6 +241,65 @@ var grid = new Ext.grid.GridPanel({ 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(); }, /** @@ -262,9 +321,6 @@ var grid = new Ext.grid.GridPanel({ * @type Function */ renderer : function(value){ - if(Ext.isString(value) && value.length < 1){ - return ' '; - } return value; }, @@ -326,18 +382,18 @@ var grid = new Ext.grid.GridPanel({ 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'). + * 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 falsey (but not undefined) (defaults to + * 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 ' '). + * The string returned by the renderer when the column value is undefined (defaults to ' '). */ undefinedText: ' ', @@ -419,6 +475,188 @@ Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, { } }); +/** + * @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:+ */ + /** + * @cfg {Object} scope The scope (this reference) in which the+ *
- + *
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 totrue. Prevent grid row selection upon mousedown. + */ + /** + * @cfg {Function} getClass A function which returns the CSS class to apply to the icon image. + * The function is passed the following parameters:
The value of the column's configured field (if any).
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container element within the table cell + * (e.g. 'style="color:red;"').
The Record providing the data.
The row index..
The column index.
The Store which is providing the data Model.
icon : StringiconCls : StringgetClass function.getClass : FunctionThe value of the column's configured field (if any).
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container element within the table cell + * (e.g. 'style="color:red;"').
The Record providing the data.
The row index..
The column index.
The Store which is providing the data Model.
handler : Functionscope : Scopethis reference) in which the
+ * handler and getClass functions are executed. Fallback defaults are this Column's
+ * configured scope, then this Column.tooltip : String