X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/grid/column/Action.js diff --git a/src/grid/column/Action.js b/src/grid/column/Action.js new file mode 100644 index 00000000..540920cd --- /dev/null +++ b/src/grid/column/Action.js @@ -0,0 +1,214 @@ +/** + * @class Ext.grid.column.Action + * @extends Ext.grid.column.Column + *

A Grid header type which renders an icon, or a series of icons in a grid cell, and offers a scoped click + * handler for each icon.

+ * + * {@img Ext.grid.column.Action/Ext.grid.column.Action.png Ext.grid.column.Action grid column} + * + * ## Code + * Ext.create('Ext.data.Store', { + * storeId:'employeeStore', + * fields:['firstname', 'lastname', 'senority', 'dep', 'hired'], + * data:[ + * {firstname:"Michael", lastname:"Scott"}, + * {firstname:"Dwight", lastname:"Schrute"}, + * {firstname:"Jim", lastname:"Halpert"}, + * {firstname:"Kevin", lastname:"Malone"}, + * {firstname:"Angela", lastname:"Martin"} + * ] + * }); + * + * Ext.create('Ext.grid.Panel', { + * title: 'Action Column Demo', + * store: Ext.data.StoreManager.lookup('employeeStore'), + * columns: [ + * {text: 'First Name', dataIndex:'firstname'}, + * {text: 'Last Name', dataIndex:'lastname'}, + * { + * xtype:'actioncolumn', + * width:50, + * items: [{ + * icon: 'images/edit.png', // Use a URL in the icon config + * tooltip: 'Edit', + * handler: function(grid, rowIndex, colIndex) { + * var rec = grid.getStore().getAt(rowIndex); + * alert("Edit " + rec.get('firstname')); + * } + * },{ + * icon: 'images/delete.png', + * tooltip: 'Delete', + * handler: function(grid, rowIndex, colIndex) { + * var rec = grid.getStore().getAt(rowIndex); + * alert("Terminate " + rec.get('firstname')); + * } + * }] + * } + * ], + * width: 250, + * renderTo: Ext.getBody() + * }); + *

The action column can be at any index in the columns array, and a grid can have any number of + * action columns.

+ * @xtype actioncolumn + */ +Ext.define('Ext.grid.column.Action', { + extend: 'Ext.grid.column.Column', + alias: ['widget.actioncolumn'], + alternateClassName: 'Ext.grid.ActionColumn', + + /** + * @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 {@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.tip.QuickTipManager#init Ext.tip.QuickTipManager} 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: + */ + /** + * @cfg {Array} items An Array which may contain multiple icon definitions, each element of which may contain: + *
+ */ + header: ' ', + + actionIdRe: /x-action-col-(\d+)/, + + /** + * @cfg {String} altText The alt text to use for the image element. Defaults to ''. + */ + altText: '', + + sortable: false, + + constructor: function(config) { + var me = this, + cfg = Ext.apply({}, config), + items = cfg.items || [me], + l = items.length, + i, + item; + + // This is a Container. Delete the items config to be reinstated after construction. + delete cfg.items; + this.callParent([cfg]); + + // Items is an array property of ActionColumns + me.items = items; + +// 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.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell'; + for (i = 0; i < l; i++) { + item = items[i]; + v += '' + me.altText + ''; + } + return v; + }; + }, + + destroy: function() { + delete this.items; + delete this.renderer; + return this.callParent(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 canceling of GridView's bubbling process. + */ + processEvent : function(type, view, cell, recordIndex, cellIndex, e){ + var m = e.getTarget().className.match(this.actionIdRe), + item, fn; + if (m && (item = this.items[parseInt(m[1], 10)])) { + if (type == 'click') { + fn = item.handler; + if (fn || this.handler) { + fn.call(item.scope||this.scope||this, view, recordIndex, cellIndex, item, e); + } + } else if ((type == 'mousedown') && (item.stopSelection !== false)) { + return false; + } + } + return this.callParent(arguments); + }, + + cascade: function(fn, scope) { + fn.call(scope||this, this); + }, + + // Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection. + getRefItems: function() { + return []; + } +}); \ No newline at end of file