docs/source/Action3.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-grid-column-Action'>/**
  19 </span> * A Grid header type which renders an icon, or a series of icons in a grid cell, and offers a scoped click
  20  * handler for each icon.
  21  *
  22  *     @example
  23  *     Ext.create('Ext.data.Store', {
  24  *         storeId:'employeeStore',
  25  *         fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
  26  *         data:[
  27  *             {firstname:&quot;Michael&quot;, lastname:&quot;Scott&quot;},
  28  *             {firstname:&quot;Dwight&quot;, lastname:&quot;Schrute&quot;},
  29  *             {firstname:&quot;Jim&quot;, lastname:&quot;Halpert&quot;},
  30  *             {firstname:&quot;Kevin&quot;, lastname:&quot;Malone&quot;},
  31  *             {firstname:&quot;Angela&quot;, lastname:&quot;Martin&quot;}
  32  *         ]
  33  *     });
  34  *
  35  *     Ext.create('Ext.grid.Panel', {
  36  *         title: 'Action Column Demo',
  37  *         store: Ext.data.StoreManager.lookup('employeeStore'),
  38  *         columns: [
  39  *             {text: 'First Name',  dataIndex:'firstname'},
  40  *             {text: 'Last Name',  dataIndex:'lastname'},
  41  *             {
  42  *                 xtype:'actioncolumn',
  43  *                 width:50,
  44  *                 items: [{
  45  *                     icon: 'extjs/examples/shared/icons/fam/cog_edit.png',  // Use a URL in the icon config
  46  *                     tooltip: 'Edit',
  47  *                     handler: function(grid, rowIndex, colIndex) {
  48  *                         var rec = grid.getStore().getAt(rowIndex);
  49  *                         alert(&quot;Edit &quot; + rec.get('firstname'));
  50  *                     }
  51  *                 },{
  52  *                     icon: 'extjs/examples/restful/images/delete.png',
  53  *                     tooltip: 'Delete',
  54  *                     handler: function(grid, rowIndex, colIndex) {
  55  *                         var rec = grid.getStore().getAt(rowIndex);
  56  *                         alert(&quot;Terminate &quot; + rec.get('firstname'));
  57  *                     }
  58  *                 }]
  59  *             }
  60  *         ],
  61  *         width: 250,
  62  *         renderTo: Ext.getBody()
  63  *     });
  64  *
  65  * The action column can be at any index in the columns array, and a grid can have any number of
  66  * action columns.
  67  */
  68 Ext.define('Ext.grid.column.Action', {
  69     extend: 'Ext.grid.column.Column',
  70     alias: ['widget.actioncolumn'],
  71     alternateClassName: 'Ext.grid.ActionColumn',
  72
  73 <span id='Ext-grid-column-Action-cfg-icon'>    /**
  74 </span>     * @cfg {String} icon
  75      * The URL of an image to display as the clickable element in the column. Defaults to
  76      * `{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}`.
  77      */
  78 <span id='Ext-grid-column-Action-cfg-iconCls'>    /**
  79 </span>     * @cfg {String} iconCls
  80      * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with
  81      * a `{@link #getClass}` function.
  82      */
  83 <span id='Ext-grid-column-Action-cfg-handler'>    /**
  84 </span>     * @cfg {Function} handler
  85      * A function called when the icon is clicked.
  86      * @cfg {Ext.view.Table} handler.view The owning TableView.
  87      * @cfg {Number} handler.rowIndex The row index clicked on.
  88      * @cfg {Number} handler.colIndex The column index clicked on.
  89      * @cfg {Object} handler.item The clicked item (or this Column if multiple {@link #items} were not configured).
  90      * @cfg {Event} handler.e The click event.
  91      */
  92 <span id='Ext-grid-column-Action-cfg-scope'>    /**
  93 </span>     * @cfg {Object} scope
  94      * The scope (**this** reference) in which the `{@link #handler}` and `{@link #getClass}` fuctions are executed.
  95      * Defaults to this Column.
  96      */
  97 <span id='Ext-grid-column-Action-cfg-tooltip'>    /**
  98 </span>     * @cfg {String} tooltip
  99      * A tooltip message to be displayed on hover. {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must
 100      * have been initialized.
 101      */
 102     /* @cfg {Boolean} disabled
 103      * If true, the action will not respond to click events, and will be displayed semi-opaque.
 104      */
 105 <span id='Ext-grid-column-Action-cfg-stopSelection'>    /**
 106 </span>     * @cfg {Boolean} [stopSelection=true]
 107      * Prevent grid _row_ selection upon mousedown.
 108      */
 109 <span id='Ext-grid-column-Action-cfg-getClass'>    /**
 110 </span>     * @cfg {Function} getClass
 111      * A function which returns the CSS class to apply to the icon image.
 112      *
 113      * @cfg {Object} getClass.v The value of the column's configured field (if any).
 114      *
 115      * @cfg {Object} getClass.metadata An object in which you may set the following attributes:
 116      * @cfg {String} getClass.metadata.css A CSS class name to add to the cell's TD element.
 117      * @cfg {String} getClass.metadata.attr An HTML attribute definition string to apply to the data container
 118      * element *within* the table cell (e.g. 'style=&quot;color:red;&quot;').
 119      *
 120      * @cfg {Ext.data.Model} getClass.r The Record providing the data.
 121      *
 122      * @cfg {Number} getClass.rowIndex The row index..
 123      *
 124      * @cfg {Number} getClass.colIndex The column index.
 125      *
 126      * @cfg {Ext.data.Store} getClass.store The Store which is providing the data Model.
 127      */
 128 <span id='Ext-grid-column-Action-cfg-items'>    /**
 129 </span>     * @cfg {Object[]} items
 130      * An Array which may contain multiple icon definitions, each element of which may contain:
 131      *
 132      * @cfg {String} items.icon The url of an image to display as the clickable element in the column.
 133      *
 134      * @cfg {String} items.iconCls A CSS class to apply to the icon image. To determine the class dynamically,
 135      * configure the item with a `getClass` function.
 136      *
 137      * @cfg {Function} items.getClass A function which returns the CSS class to apply to the icon image.
 138      * @cfg {Object} items.getClass.v The value of the column's configured field (if any).
 139      * @cfg {Object} items.getClass.metadata An object in which you may set the following attributes:
 140      * @cfg {String} items.getClass.metadata.css A CSS class name to add to the cell's TD element.
 141      * @cfg {String} items.getClass.metadata.attr An HTML attribute definition string to apply to the data
 142      * container element _within_ the table cell (e.g. 'style=&quot;color:red;&quot;').
 143      * @cfg {Ext.data.Model} items.getClass.r The Record providing the data.
 144      * @cfg {Number} items.getClass.rowIndex The row index..
 145      * @cfg {Number} items.getClass.colIndex The column index.
 146      * @cfg {Ext.data.Store} items.getClass.store The Store which is providing the data Model.
 147      *
 148      * @cfg {Function} items.handler A function called when the icon is clicked.
 149      *
 150      * @cfg {Object} items.scope The scope (`this` reference) in which the `handler` and `getClass` functions
 151      * are executed. Fallback defaults are this Column's configured scope, then this Column.
 152      *
 153      * @cfg {String} items.tooltip A tooltip message to be displayed on hover.
 154      * @cfg {Boolean} items.disabled If true, the action will not respond to click events, and will be displayed semi-opaque.
 155      * {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have been initialized.
 156      */
 157 <span id='Ext-grid-column-Action-property-items'>    /**
 158 </span>     * @property {Array} items
 159      * An array of action items copied from the configured {@link #cfg-items items} configuration. Each will have
 160      * an `enable` and `disable` method added which will enable and disable the associated action, and
 161      * update the displayed icon accordingly.
 162      */
 163     header: '&amp;#160;',
 164
 165     actionIdRe: new RegExp(Ext.baseCSSPrefix + 'action-col-(\\d+)'),
 166
 167 <span id='Ext-grid-column-Action-cfg-altText'>    /**
 168 </span>     * @cfg {String} altText
 169      * The alt text to use for the image element.
 170      */
 171     altText: '',
 172
 173     sortable: false,
 174
 175     constructor: function(config) {
 176         var me = this,
 177             cfg = Ext.apply({}, config),
 178             items = cfg.items || [me],
 179             l = items.length,
 180             i,
 181             item;
 182
 183         // This is a Container. Delete the items config to be reinstated after construction.
 184         delete cfg.items;
 185         me.callParent([cfg]);
 186
 187         // Items is an array property of ActionColumns
 188         me.items = items;
 189
 190 //      Renderer closure iterates through items creating an &lt;img&gt; element for each and tagging with an identifying
 191 //      class name x-action-col-{n}
 192         me.renderer = function(v, meta) {
 193 //          Allow a configured renderer to create initial value (And set the other values in the &quot;metadata&quot; argument!)
 194             v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
 195
 196             meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
 197             for (i = 0; i &lt; l; i++) {
 198                 item = items[i];
 199                 item.disable = Ext.Function.bind(me.disableAction, me, [i]);
 200                 item.enable = Ext.Function.bind(me.enableAction, me, [i]);
 201                 v += '&lt;img alt=&quot;' + (item.altText || me.altText) + '&quot; src=&quot;' + (item.icon || Ext.BLANK_IMAGE_URL) +
 202                     '&quot; class=&quot;' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') +
 203                     ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '&quot;' +
 204                     ((item.tooltip) ? ' data-qtip=&quot;' + item.tooltip + '&quot;' : '') + ' /&gt;';
 205             }
 206             return v;
 207         };
 208     },
 209
 210 <span id='Ext-grid-column-Action-method-enableAction'>    /**
 211 </span>     * Enables this ActionColumn's action at the specified index.
 212      */
 213     enableAction: function(index) {
 214         var me = this;
 215
 216         if (!index) {
 217             index = 0;
 218         } else if (!Ext.isNumber(index)) {
 219             index = Ext.Array.indexOf(me.items, index);
 220         }
 221         me.items[index].disabled = false;
 222         me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).removeCls(me.disabledCls);
 223     },
 224
 225 <span id='Ext-grid-column-Action-method-disableAction'>    /**
 226 </span>     * Disables this ActionColumn's action at the specified index.
 227      */
 228     disableAction: function(index) {
 229         var me = this;
 230
 231         if (!index) {
 232             index = 0;
 233         } else if (!Ext.isNumber(index)) {
 234             index = Ext.Array.indexOf(me.items, index);
 235         }
 236         me.items[index].disabled = true;
 237         me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).addCls(me.disabledCls);
 238     },
 239
 240     destroy: function() {
 241         delete this.items;
 242         delete this.renderer;
 243         return this.callParent(arguments);
 244     },
 245
 246 <span id='Ext-grid-column-Action-method-processEvent'>    /**
 247 </span>     * @private
 248      * Process and refire events routed from the GridView's processEvent method.
 249      * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
 250      * Returns the event handler's status to allow canceling of GridView's bubbling process.
 251      */
 252     processEvent : function(type, view, cell, recordIndex, cellIndex, e){
 253         var me = this,
 254             match = e.getTarget().className.match(me.actionIdRe),
 255             item, fn;
 256
 257         if (match) {
 258             item = me.items[parseInt(match[1], 10)];
 259             if (item) {
 260                 if (type == 'click') {
 261                     fn = item.handler || me.handler;
 262                     if (fn &amp;&amp; !item.disabled) {
 263                         fn.call(item.scope || me.scope || me, view, recordIndex, cellIndex, item, e);
 264                     }
 265                 } else if (type == 'mousedown' &amp;&amp; item.stopSelection !== false) {
 266                     return false;
 267                 }
 268             }
 269         }
 270         return me.callParent(arguments);
 271     },
 272
 273     cascade: function(fn, scope) {
 274         fn.call(scope||this, this);
 275     },
 276
 277     // Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection.
 278     getRefItems: function() {
 279         return [];
 280     }
 281 });</pre>
 282 </body>
 283 </html>