3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * A Grid header type which renders an icon, or a series of icons in a grid cell, and offers a scoped click
17 * handler for each icon.
20 * Ext.create('Ext.data.Store', {
21 * storeId:'employeeStore',
22 * fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
24 * {firstname:"Michael", lastname:"Scott"},
25 * {firstname:"Dwight", lastname:"Schrute"},
26 * {firstname:"Jim", lastname:"Halpert"},
27 * {firstname:"Kevin", lastname:"Malone"},
28 * {firstname:"Angela", lastname:"Martin"}
32 * Ext.create('Ext.grid.Panel', {
33 * title: 'Action Column Demo',
34 * store: Ext.data.StoreManager.lookup('employeeStore'),
36 * {text: 'First Name', dataIndex:'firstname'},
37 * {text: 'Last Name', dataIndex:'lastname'},
39 * xtype:'actioncolumn',
42 * icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
44 * handler: function(grid, rowIndex, colIndex) {
45 * var rec = grid.getStore().getAt(rowIndex);
46 * alert("Edit " + rec.get('firstname'));
49 * icon: 'extjs/examples/restful/images/delete.png',
51 * handler: function(grid, rowIndex, colIndex) {
52 * var rec = grid.getStore().getAt(rowIndex);
53 * alert("Terminate " + rec.get('firstname'));
59 * renderTo: Ext.getBody()
62 * The action column can be at any index in the columns array, and a grid can have any number of
65 Ext.define('Ext.grid.column.Action', {
66 extend: 'Ext.grid.column.Column',
67 alias: ['widget.actioncolumn'],
68 alternateClassName: 'Ext.grid.ActionColumn',
72 * The URL of an image to display as the clickable element in the column. Defaults to
73 * `{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}`.
76 * @cfg {String} iconCls
77 * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with
78 * a `{@link #getClass}` function.
81 * @cfg {Function} handler
82 * A function called when the icon is clicked.
83 * @cfg {Ext.view.Table} handler.view The owning TableView.
84 * @cfg {Number} handler.rowIndex The row index clicked on.
85 * @cfg {Number} handler.colIndex The column index clicked on.
86 * @cfg {Object} handler.item The clicked item (or this Column if multiple {@link #items} were not configured).
87 * @cfg {Event} handler.e The click event.
91 * The scope (**this** reference) in which the `{@link #handler}` and `{@link #getClass}` fuctions are executed.
92 * Defaults to this Column.
95 * @cfg {String} tooltip
96 * A tooltip message to be displayed on hover. {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must
97 * have been initialized.
99 /* @cfg {Boolean} disabled
100 * If true, the action will not respond to click events, and will be displayed semi-opaque.
103 * @cfg {Boolean} [stopSelection=true]
104 * Prevent grid _row_ selection upon mousedown.
107 * @cfg {Function} getClass
108 * A function which returns the CSS class to apply to the icon image.
110 * @cfg {Object} getClass.v The value of the column's configured field (if any).
112 * @cfg {Object} getClass.metadata An object in which you may set the following attributes:
113 * @cfg {String} getClass.metadata.css A CSS class name to add to the cell's TD element.
114 * @cfg {String} getClass.metadata.attr An HTML attribute definition string to apply to the data container
115 * element *within* the table cell (e.g. 'style="color:red;"').
117 * @cfg {Ext.data.Model} getClass.r The Record providing the data.
119 * @cfg {Number} getClass.rowIndex The row index..
121 * @cfg {Number} getClass.colIndex The column index.
123 * @cfg {Ext.data.Store} getClass.store The Store which is providing the data Model.
126 * @cfg {Object[]} items
127 * An Array which may contain multiple icon definitions, each element of which may contain:
129 * @cfg {String} items.icon The url of an image to display as the clickable element in the column.
131 * @cfg {String} items.iconCls A CSS class to apply to the icon image. To determine the class dynamically,
132 * configure the item with a `getClass` function.
134 * @cfg {Function} items.getClass A function which returns the CSS class to apply to the icon image.
135 * @cfg {Object} items.getClass.v The value of the column's configured field (if any).
136 * @cfg {Object} items.getClass.metadata An object in which you may set the following attributes:
137 * @cfg {String} items.getClass.metadata.css A CSS class name to add to the cell's TD element.
138 * @cfg {String} items.getClass.metadata.attr An HTML attribute definition string to apply to the data
139 * container element _within_ the table cell (e.g. 'style="color:red;"').
140 * @cfg {Ext.data.Model} items.getClass.r The Record providing the data.
141 * @cfg {Number} items.getClass.rowIndex The row index..
142 * @cfg {Number} items.getClass.colIndex The column index.
143 * @cfg {Ext.data.Store} items.getClass.store The Store which is providing the data Model.
145 * @cfg {Function} items.handler A function called when the icon is clicked.
147 * @cfg {Object} items.scope The scope (`this` reference) in which the `handler` and `getClass` functions
148 * are executed. Fallback defaults are this Column's configured scope, then this Column.
150 * @cfg {String} items.tooltip A tooltip message to be displayed on hover.
151 * @cfg {Boolean} items.disabled If true, the action will not respond to click events, and will be displayed semi-opaque.
152 * {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have been initialized.
155 * @property {Array} items
156 * An array of action items copied from the configured {@link #cfg-items items} configuration. Each will have
157 * an `enable` and `disable` method added which will enable and disable the associated action, and
158 * update the displayed icon accordingly.
162 actionIdRe: new RegExp(Ext.baseCSSPrefix + 'action-col-(\\d+)'),
165 * @cfg {String} altText
166 * The alt text to use for the image element.
172 constructor: function(config) {
174 cfg = Ext.apply({}, config),
175 items = cfg.items || [me],
180 // This is a Container. Delete the items config to be reinstated after construction.
182 me.callParent([cfg]);
184 // Items is an array property of ActionColumns
187 // Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
188 // class name x-action-col-{n}
189 me.renderer = function(v, meta) {
190 // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
191 v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
193 meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
194 for (i = 0; i < l; i++) {
196 item.disable = Ext.Function.bind(me.disableAction, me, [i]);
197 item.enable = Ext.Function.bind(me.enableAction, me, [i]);
198 v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
199 '" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') +
200 ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '"' +
201 ((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';
208 * Enables this ActionColumn's action at the specified index.
210 enableAction: function(index) {
215 } else if (!Ext.isNumber(index)) {
216 index = Ext.Array.indexOf(me.items, index);
218 me.items[index].disabled = false;
219 me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).removeCls(me.disabledCls);
223 * Disables this ActionColumn's action at the specified index.
225 disableAction: function(index) {
230 } else if (!Ext.isNumber(index)) {
231 index = Ext.Array.indexOf(me.items, index);
233 me.items[index].disabled = true;
234 me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).addCls(me.disabledCls);
237 destroy: function() {
239 delete this.renderer;
240 return this.callParent(arguments);
245 * Process and refire events routed from the GridView's processEvent method.
246 * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
247 * Returns the event handler's status to allow canceling of GridView's bubbling process.
249 processEvent : function(type, view, cell, recordIndex, cellIndex, e){
251 match = e.getTarget().className.match(me.actionIdRe),
255 item = me.items[parseInt(match[1], 10)];
257 if (type == 'click') {
258 fn = item.handler || me.handler;
259 if (fn && !item.disabled) {
260 fn.call(item.scope || me.scope || me, view, recordIndex, cellIndex, item, e);
262 } else if (type == 'mousedown' && item.stopSelection !== false) {
267 return me.callParent(arguments);
270 cascade: function(fn, scope) {
271 fn.call(scope||this, this);
274 // Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection.
275 getRefItems: function() {