/*! - * Ext JS Library 3.2.1 - * Copyright(c) 2006-2010 Ext JS, Inc. - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */

/** * @class Ext.grid.Column @@ -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:

grid : GridPanel
The owning GridPanel.
rowIndex : Number
The row index clicked on.
colIndex : Number
The column index clicked on.
item : Object
The clicked item (or this Column if multiple + * {@link #items} were not configured).
e : Event
The click event.

+ */ +

/** + * @cfg {Object} scope The scope (this reference) in which the {@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;"').
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.

+ */ +

/** + * @cfg {Array} items An Array which may contain multiple icon definitions, each element of which may contain: + *

icon : String
The url of an image to display as the clickable element + * in the column.
iconCls : String
A CSS class to apply to the icon image. + * To determine the class dynamically, configure the item with a getClass function.
getClass : Function
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;"').
- 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.
handler : Function
A function called when the icon is clicked.
scope : Scope
The scope (this reference) in which the + * handler and getClass functions are executed. Fallback defaults are this Column's + * configured scope, then this Column.
tooltip : String
A tooltip message to be displayed on hover. + * {@link Ext.QuickTips#init Ext.QuickTips} must have been initialized.

+ */ + header: ' ', + + actionIdRe: /x-action-col-(\d+)/, + +

/** + * @cfg {String} altText The alt text to use for the image element. Defaults to ''. + */ + altText: '', + + constructor: function(cfg) { + var me = this, + items = cfg.items || (me.items = [me]), + l = items.length, + i, + item; + + Ext.grid.ActionColumn.superclass.constructor.call(me, cfg); + +// Renderer closure iterates through items creating an element for each and tagging with an identifying +// class name x-action-col-{n} + me.renderer = function(v, meta) { +// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!) + v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : ''; + + meta.css += ' x-action-col-cell'; + for (i = 0; i < l; i++) { + item = items[i]; + v += '

'; + } + return v; + }; + }, + + destroy: function() { + delete this.items; + delete this.renderer; + return Ext.grid.ActionColumn.superclass.destroy.apply(this, arguments); + }, + + /** + * @private + * Process and refire events routed from the GridView's processEvent method. + * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection. + * Returns the event handler's status to allow cancelling of GridView's bubbling process. + */ + processEvent : function(name, e, grid, rowIndex, colIndex){ + var m = e.getTarget().className.match(this.actionIdRe), + item, fn; + if (m && (item = this.items[parseInt(m[1], 10)])) { + if (name == 'click') { + (fn = item.handler || this.handler) && fn.call(item.scope||this.scope||this, grid, rowIndex, colIndex, item, e); + } else if ((name == 'mousedown') && (item.stopSelection !== false)) { + return false; + } + } + return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments); + } +}); + /* * @property types * @type Object @@ -439,7 +677,8 @@ Ext.grid.Column.types = { booleancolumn: Ext.grid.BooleanColumn, numbercolumn: Ext.grid.NumberColumn, datecolumn: Ext.grid.DateColumn, - templatecolumn: Ext.grid.TemplateColumn + templatecolumn: Ext.grid.TemplateColumn, + actioncolumn: Ext.grid.ActionColumn };