/**
- * @class Ext.grid.column.Action
- * @extends Ext.grid.column.Column
- * <p>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.</p>
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * 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
+ * @example
* Ext.create('Ext.data.Store', {
* storeId:'employeeStore',
* fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
@@ -15,10 +28,10 @@
* {firstname:"Dwight", lastname:"Schrute"},
* {firstname:"Jim", lastname:"Halpert"},
* {firstname:"Kevin", lastname:"Malone"},
- * {firstname:"Angela", lastname:"Martin"}
+ * {firstname:"Angela", lastname:"Martin"}
* ]
* });
- *
+ *
* Ext.create('Ext.grid.Panel', {
* title: 'Action Column Demo',
* store: Ext.data.StoreManager.lookup('employeeStore'),
@@ -26,120 +39,137 @@
* {text: 'First Name', dataIndex:'firstname'},
* {text: 'Last Name', dataIndex:'lastname'},
* {
- * xtype:'actioncolumn',
+ * xtype:'actioncolumn',
* width:50,
* items: [{
- * icon: 'images/edit.png', // Use a URL in the icon config
+ * icon: 'extjs/examples/shared/icons/fam/cog_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',
+ * icon: 'extjs/examples/restful/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()
* });
- * <p>The action column can be at any index in the columns array, and a grid can have any number of
- * action columns. </p>
- * @xtype actioncolumn
+ *
+ * The action column can be at any index in the columns array, and a grid can have any number of
+ * action columns.
*/
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 <code>{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}</code>.
+ * The URL of an image to display as the clickable element in the column. 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 <code>{@link #getClass}</code> function.
+ * 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.
+ * @cfg {Ext.view.Table} handler.view The owning TableView.
+ * @cfg {Number} handler.rowIndex The row index clicked on.
+ * @cfg {Number} handler.colIndex The column index clicked on.
+ * @cfg {Object} handler.item The clicked item (or this Column if multiple {@link #items} were not configured).
+ * @cfg {Event} handler.e The click event.
*/
- /**
- * @cfg {Function} handler A function called when the icon is clicked.
- * The handler is passed the following parameters:<div class="mdetail-params"><ul>
- * <li><code>view</code> : TableView<div class="sub-desc">The owning TableView.</div></li>
- * <li><code>rowIndex</code> : Number<div class="sub-desc">The row index clicked on.</div></li>
- * <li><code>colIndex</code> : Number<div class="sub-desc">The column index clicked on.</div></li>
- * <li><code>item</code> : Object<div class="sub-desc">The clicked item (or this Column if multiple
- * {@link #items} were not configured).</div></li>
- * <li><code>e</code> : Event<div class="sub-desc">The click event.</div></li>
- * </ul></div>
+ /**
+ * @cfg {Object} scope
+ * The scope (**this** reference) in which the `{@link #handler}` and `{@link #getClass}` fuctions are executed.
+ * Defaults to this Column.
*/
- /**
- * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the <code>{@link #handler}</code>
- * and <code>{@link #getClass}</code> 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 {String} tooltip A tooltip message to be displayed on hover. {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have
- * been initialized.
+ /* @cfg {Boolean} disabled
+ * If true, the action will not respond to click events, and will be displayed semi-opaque.
*/
- /**
- * @cfg {Boolean} stopSelection Defaults to <code>true</code>. Prevent grid <i>row</i> selection upon mousedown.
+ /**
+ * @cfg {Boolean} [stopSelection=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:<ul>
- * <li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li>
- * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
- * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
- * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell
- * (e.g. 'style="color:red;"').</p></li>
- * </ul></p></li>
- * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li>
- * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li>
- * <li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li>
- * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
- * </ul>
+ /**
+ * @cfg {Function} getClass
+ * A function which returns the CSS class to apply to the icon image.
+ *
+ * @cfg {Object} getClass.v The value of the column's configured field (if any).
+ *
+ * @cfg {Object} getClass.metadata An object in which you may set the following attributes:
+ * @cfg {String} getClass.metadata.css A CSS class name to add to the cell's TD element.
+ * @cfg {String} getClass.metadata.attr An HTML attribute definition string to apply to the data container
+ * element *within* the table cell (e.g. 'style="color:red;"').
+ *
+ * @cfg {Ext.data.Model} getClass.r The Record providing the data.
+ *
+ * @cfg {Number} getClass.rowIndex The row index..
+ *
+ * @cfg {Number} getClass.colIndex The column index.
+ *
+ * @cfg {Ext.data.Store} getClass.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:
- * <div class="mdetail-params"><ul>
- * <li><code>icon</code> : String<div class="sub-desc">The url of an image to display as the clickable element
- * in the column.</div></li>
- * <li><code>iconCls</code> : String<div class="sub-desc">A CSS class to apply to the icon image.
- * To determine the class dynamically, configure the item with a <code>getClass</code> function.</div></li>
- * <li><code>getClass</code> : Function<div class="sub-desc">A function which returns the CSS class to apply to the icon image.
- * The function is passed the following parameters:<ul>
- * <li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li>
- * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
- * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
- * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell
- * (e.g. 'style="color:red;"').</p></li>
- * </ul></p></li>
- * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li>
- * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li>
- * <li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li>
- * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
- * </ul></div></li>
- * <li><code>handler</code> : Function<div class="sub-desc">A function called when the icon is clicked.</div></li>
- * <li><code>scope</code> : Scope<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the
- * <code>handler</code> and <code>getClass</code> functions are executed. Fallback defaults are this Column's
- * configured scope, then this Column.</div></li>
- * <li><code>tooltip</code> : String<div class="sub-desc">A tooltip message to be displayed on hover.
- * {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have been initialized.</div></li>
- * </ul></div>
+ /**
+ * @cfg {Object[]} items
+ * An Array which may contain multiple icon definitions, each element of which may contain:
+ *
+ * @cfg {String} items.icon The url of an image to display as the clickable element in the column.
+ *
+ * @cfg {String} items.iconCls A CSS class to apply to the icon image. To determine the class dynamically,
+ * configure the item with a `getClass` function.
+ *
+ * @cfg {Function} items.getClass A function which returns the CSS class to apply to the icon image.
+ * @cfg {Object} items.getClass.v The value of the column's configured field (if any).
+ * @cfg {Object} items.getClass.metadata An object in which you may set the following attributes:
+ * @cfg {String} items.getClass.metadata.css A CSS class name to add to the cell's TD element.
+ * @cfg {String} items.getClass.metadata.attr An HTML attribute definition string to apply to the data
+ * container element _within_ the table cell (e.g. 'style="color:red;"').
+ * @cfg {Ext.data.Model} items.getClass.r The Record providing the data.
+ * @cfg {Number} items.getClass.rowIndex The row index..
+ * @cfg {Number} items.getClass.colIndex The column index.
+ * @cfg {Ext.data.Store} items.getClass.store The Store which is providing the data Model.
+ *
+ * @cfg {Function} items.handler A function called when the icon is clicked.
+ *
+ * @cfg {Object} items.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.
+ *
+ * @cfg {String} items.tooltip A tooltip message to be displayed on hover.
+ * @cfg {Boolean} items.disabled If true, the action will not respond to click events, and will be displayed semi-opaque.
+ * {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have been initialized.
+ */
+ /**
+ * @property {Array} items
+ * An array of action items copied from the configured {@link #cfg-items items} configuration. Each will have
+ * an `enable` and `disable` method added which will enable and disable the associated action, and
+ * update the displayed icon accordingly.
*/
header: ' ',
- actionIdRe: /x-action-col-(\d+)/,
+ actionIdRe: new RegExp(Ext.baseCSSPrefix + 'action-col-(\\d+)'),
- /**
- * @cfg {String} altText The alt text to use for the image element. Defaults to <tt>''</tt>.
+ /**
+ * @cfg {String} altText
+ * The alt text to use for the image element.
*/
altText: '',
-
+
sortable: false,
constructor: function(config) {
@@ -152,12 +182,12 @@ Ext.define('Ext.grid.column.Action', {
// This is a Container. Delete the items config to be reinstated after construction.
delete cfg.items;
- this.callParent([cfg]);
+ me.callParent([cfg]);
// Items is an array property of ActionColumns
me.items = items;
-// Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
+// Renderer closure iterates through items creating an <img> 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!)
@@ -166,8 +196,10 @@ Ext.define('Ext.grid.column.Action', {
meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (i = 0; i < l; i++) {
item = items[i];
- v += '<img alt="' + me.altText + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
- '" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.iconCls || '') +
+ item.disable = Ext.Function.bind(me.disableAction, me, [i]);
+ item.enable = Ext.Function.bind(me.enableAction, me, [i]);
+ v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
+ '" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '"' +
((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';
}
@@ -175,32 +207,67 @@ Ext.define('Ext.grid.column.Action', {
};
},
+ /**
+ * Enables this ActionColumn's action at the specified index.
+ */
+ enableAction: function(index) {
+ var me = this;
+
+ if (!index) {
+ index = 0;
+ } else if (!Ext.isNumber(index)) {
+ index = Ext.Array.indexOf(me.items, index);
+ }
+ me.items[index].disabled = false;
+ me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).removeCls(me.disabledCls);
+ },
+
+ /**
+ * Disables this ActionColumn's action at the specified index.
+ */
+ disableAction: function(index) {
+ var me = this;
+
+ if (!index) {
+ index = 0;
+ } else if (!Ext.isNumber(index)) {
+ index = Ext.Array.indexOf(me.items, index);
+ }
+ me.items[index].disabled = true;
+ me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).addCls(me.disabledCls);
+ },
+
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),
+ var me = this,
+ match = e.getTarget().className.match(me.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);
+
+ if (match) {
+ item = me.items[parseInt(match[1], 10)];
+ if (item) {
+ if (type == 'click') {
+ fn = item.handler || me.handler;
+ if (fn && !item.disabled) {
+ fn.call(item.scope || me.scope || me, view, recordIndex, cellIndex, item, e);
+ }
+ } else if (type == 'mousedown' && item.stopSelection !== false) {
+ return false;
}
- } else if ((type == 'mousedown') && (item.stopSelection !== false)) {
- return false;
}
}
- return this.callParent(arguments);
+ return me.callParent(arguments);
},
cascade: function(fn, scope) {
@@ -211,4 +278,6 @@ Ext.define('Ext.grid.column.Action', {
getRefItems: function() {
return [];
}
-});