docs/source/Action3.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-grid.column.Action'>/**
   2 </span> * @class Ext.grid.column.Action
   3  * @extends Ext.grid.column.Column
   4  * &lt;p&gt;A Grid header type which renders an icon, or a series of icons in a grid cell, and offers a scoped click
   5  * handler for each icon.&lt;/p&gt;
   6  *
   7  * {@img Ext.grid.column.Action/Ext.grid.column.Action.png Ext.grid.column.Action grid column}
   8  *
   9  * ## Code
  10  *     Ext.create('Ext.data.Store', {
  11  *         storeId:'employeeStore',
  12  *         fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
  13  *         data:[
  14  *             {firstname:&quot;Michael&quot;, lastname:&quot;Scott&quot;},
  15  *             {firstname:&quot;Dwight&quot;, lastname:&quot;Schrute&quot;},
  16  *             {firstname:&quot;Jim&quot;, lastname:&quot;Halpert&quot;},
  17  *             {firstname:&quot;Kevin&quot;, lastname:&quot;Malone&quot;},
  18  *             {firstname:&quot;Angela&quot;, lastname:&quot;Martin&quot;}
  19  *         ]
  20  *     });
  21  *
  22  *     Ext.create('Ext.grid.Panel', {
  23  *         title: 'Action Column Demo',
  24  *         store: Ext.data.StoreManager.lookup('employeeStore'),
  25  *         columns: [
  26  *             {text: 'First Name',  dataIndex:'firstname'},
  27  *             {text: 'Last Name',  dataIndex:'lastname'},
  28  *             {
  29  *                 xtype:'actioncolumn',
  30  *                 width:50,
  31  *                 items: [{
  32  *                     icon: 'images/edit.png',  // Use a URL in the icon config
  33  *                     tooltip: 'Edit',
  34  *                     handler: function(grid, rowIndex, colIndex) {
  35  *                         var rec = grid.getStore().getAt(rowIndex);
  36  *                         alert(&quot;Edit &quot; + rec.get('firstname'));
  37  *                     }
  38  *                 },{
  39  *                     icon: 'images/delete.png',
  40  *                     tooltip: 'Delete',
  41  *                     handler: function(grid, rowIndex, colIndex) {
  42  *                         var rec = grid.getStore().getAt(rowIndex);
  43  *                         alert(&quot;Terminate &quot; + rec.get('firstname'));
  44  *                     }
  45  *                 }]
  46  *             }
  47  *         ],
  48  *         width: 250,
  49  *         renderTo: Ext.getBody()
  50  *     });
  51  * &lt;p&gt;The action column can be at any index in the columns array, and a grid can have any number of
  52  * action columns. &lt;/p&gt;
  53  * @xtype actioncolumn
  54  */
  55 Ext.define('Ext.grid.column.Action', {
  56     extend: 'Ext.grid.column.Column',
  57     alias: ['widget.actioncolumn'],
  58     alternateClassName: 'Ext.grid.ActionColumn',
  59
  60 <span id='Ext-grid.column.Action-cfg-icon'>    /**
  61 </span>     * @cfg {String} icon
  62      * The URL of an image to display as the clickable element in the column.
  63      * Optional - defaults to &lt;code&gt;{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}&lt;/code&gt;.
  64      */
  65 <span id='Ext-grid.column.Action-cfg-iconCls'>    /**
  66 </span>     * @cfg {String} iconCls
  67      * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a &lt;code&gt;{@link #getClass}&lt;/code&gt; function.
  68      */
  69 <span id='Ext-grid.column.Action-cfg-handler'>    /**
  70 </span>     * @cfg {Function} handler A function called when the icon is clicked.
  71      * The handler is passed the following parameters:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  72      * &lt;li&gt;&lt;code&gt;view&lt;/code&gt; : TableView&lt;div class=&quot;sub-desc&quot;&gt;The owning TableView.&lt;/div&gt;&lt;/li&gt;
  73      * &lt;li&gt;&lt;code&gt;rowIndex&lt;/code&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;The row index clicked on.&lt;/div&gt;&lt;/li&gt;
  74      * &lt;li&gt;&lt;code&gt;colIndex&lt;/code&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;The column index clicked on.&lt;/div&gt;&lt;/li&gt;
  75      * &lt;li&gt;&lt;code&gt;item&lt;/code&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;The clicked item (or this Column if multiple
  76      * {@link #items} were not configured).&lt;/div&gt;&lt;/li&gt;
  77      * &lt;li&gt;&lt;code&gt;e&lt;/code&gt; : Event&lt;div class=&quot;sub-desc&quot;&gt;The click event.&lt;/div&gt;&lt;/li&gt;
  78      * &lt;/ul&gt;&lt;/div&gt;
  79      */
  80 <span id='Ext-grid.column.Action-cfg-scope'>    /**
  81 </span>     * @cfg {Object} scope The scope (&lt;tt&gt;&lt;b&gt;this&lt;/b&gt;&lt;/tt&gt; reference) in which the &lt;code&gt;{@link #handler}&lt;/code&gt;
  82      * and &lt;code&gt;{@link #getClass}&lt;/code&gt; fuctions are executed. Defaults to this Column.
  83      */
  84 <span id='Ext-grid.column.Action-cfg-tooltip'>    /**
  85 </span>     * @cfg {String} tooltip A tooltip message to be displayed on hover. {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have
  86      * been initialized.
  87      */
  88 <span id='Ext-grid.column.Action-cfg-stopSelection'>    /**
  89 </span>     * @cfg {Boolean} stopSelection Defaults to &lt;code&gt;true&lt;/code&gt;. Prevent grid &lt;i&gt;row&lt;/i&gt; selection upon mousedown.
  90      */
  91 <span id='Ext-grid.column.Action-cfg-getClass'>    /**
  92 </span>     * @cfg {Function} getClass A function which returns the CSS class to apply to the icon image.
  93      * The function is passed the following parameters:&lt;ul&gt;
  94      *     &lt;li&gt;&lt;b&gt;v&lt;/b&gt; : Object&lt;p class=&quot;sub-desc&quot;&gt;The value of the column's configured field (if any).&lt;/p&gt;&lt;/li&gt;
  95      *     &lt;li&gt;&lt;b&gt;metadata&lt;/b&gt; : Object&lt;p class=&quot;sub-desc&quot;&gt;An object in which you may set the following attributes:&lt;ul&gt;
  96      *         &lt;li&gt;&lt;b&gt;css&lt;/b&gt; : String&lt;p class=&quot;sub-desc&quot;&gt;A CSS class name to add to the cell's TD element.&lt;/p&gt;&lt;/li&gt;
  97      *         &lt;li&gt;&lt;b&gt;attr&lt;/b&gt; : String&lt;p class=&quot;sub-desc&quot;&gt;An HTML attribute definition string to apply to the data container element &lt;i&gt;within&lt;/i&gt; the table cell
  98      *         (e.g. 'style=&quot;color:red;&quot;').&lt;/p&gt;&lt;/li&gt;
  99      *     &lt;/ul&gt;&lt;/p&gt;&lt;/li&gt;
 100      *     &lt;li&gt;&lt;b&gt;r&lt;/b&gt; : Ext.data.Record&lt;p class=&quot;sub-desc&quot;&gt;The Record providing the data.&lt;/p&gt;&lt;/li&gt;
 101      *     &lt;li&gt;&lt;b&gt;rowIndex&lt;/b&gt; : Number&lt;p class=&quot;sub-desc&quot;&gt;The row index..&lt;/p&gt;&lt;/li&gt;
 102      *     &lt;li&gt;&lt;b&gt;colIndex&lt;/b&gt; : Number&lt;p class=&quot;sub-desc&quot;&gt;The column index.&lt;/p&gt;&lt;/li&gt;
 103      *     &lt;li&gt;&lt;b&gt;store&lt;/b&gt; : Ext.data.Store&lt;p class=&quot;sub-desc&quot;&gt;The Store which is providing the data Model.&lt;/p&gt;&lt;/li&gt;
 104      * &lt;/ul&gt;
 105      */
 106 <span id='Ext-grid.column.Action-cfg-items'>    /**
 107 </span>     * @cfg {Array} items An Array which may contain multiple icon definitions, each element of which may contain:
 108      * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 109      * &lt;li&gt;&lt;code&gt;icon&lt;/code&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;The url of an image to display as the clickable element
 110      * in the column.&lt;/div&gt;&lt;/li&gt;
 111      * &lt;li&gt;&lt;code&gt;iconCls&lt;/code&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;A CSS class to apply to the icon image.
 112      * To determine the class dynamically, configure the item with a &lt;code&gt;getClass&lt;/code&gt; function.&lt;/div&gt;&lt;/li&gt;
 113      * &lt;li&gt;&lt;code&gt;getClass&lt;/code&gt; : Function&lt;div class=&quot;sub-desc&quot;&gt;A function which returns the CSS class to apply to the icon image.
 114      * The function is passed the following parameters:&lt;ul&gt;
 115      *     &lt;li&gt;&lt;b&gt;v&lt;/b&gt; : Object&lt;p class=&quot;sub-desc&quot;&gt;The value of the column's configured field (if any).&lt;/p&gt;&lt;/li&gt;
 116      *     &lt;li&gt;&lt;b&gt;metadata&lt;/b&gt; : Object&lt;p class=&quot;sub-desc&quot;&gt;An object in which you may set the following attributes:&lt;ul&gt;
 117      *         &lt;li&gt;&lt;b&gt;css&lt;/b&gt; : String&lt;p class=&quot;sub-desc&quot;&gt;A CSS class name to add to the cell's TD element.&lt;/p&gt;&lt;/li&gt;
 118      *         &lt;li&gt;&lt;b&gt;attr&lt;/b&gt; : String&lt;p class=&quot;sub-desc&quot;&gt;An HTML attribute definition string to apply to the data container element &lt;i&gt;within&lt;/i&gt; the table cell
 119      *         (e.g. 'style=&quot;color:red;&quot;').&lt;/p&gt;&lt;/li&gt;
 120      *     &lt;/ul&gt;&lt;/p&gt;&lt;/li&gt;
 121      *     &lt;li&gt;&lt;b&gt;r&lt;/b&gt; : Ext.data.Record&lt;p class=&quot;sub-desc&quot;&gt;The Record providing the data.&lt;/p&gt;&lt;/li&gt;
 122      *     &lt;li&gt;&lt;b&gt;rowIndex&lt;/b&gt; : Number&lt;p class=&quot;sub-desc&quot;&gt;The row index..&lt;/p&gt;&lt;/li&gt;
 123      *     &lt;li&gt;&lt;b&gt;colIndex&lt;/b&gt; : Number&lt;p class=&quot;sub-desc&quot;&gt;The column index.&lt;/p&gt;&lt;/li&gt;
 124      *     &lt;li&gt;&lt;b&gt;store&lt;/b&gt; : Ext.data.Store&lt;p class=&quot;sub-desc&quot;&gt;The Store which is providing the data Model.&lt;/p&gt;&lt;/li&gt;
 125      * &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
 126      * &lt;li&gt;&lt;code&gt;handler&lt;/code&gt; : Function&lt;div class=&quot;sub-desc&quot;&gt;A function called when the icon is clicked.&lt;/div&gt;&lt;/li&gt;
 127      * &lt;li&gt;&lt;code&gt;scope&lt;/code&gt; : Scope&lt;div class=&quot;sub-desc&quot;&gt;The scope (&lt;code&gt;&lt;b&gt;this&lt;/b&gt;&lt;/code&gt; reference) in which the
 128      * &lt;code&gt;handler&lt;/code&gt; and &lt;code&gt;getClass&lt;/code&gt; functions are executed. Fallback defaults are this Column's
 129      * configured scope, then this Column.&lt;/div&gt;&lt;/li&gt;
 130      * &lt;li&gt;&lt;code&gt;tooltip&lt;/code&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;A tooltip message to be displayed on hover.
 131      * {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have been initialized.&lt;/div&gt;&lt;/li&gt;
 132      * &lt;/ul&gt;&lt;/div&gt;
 133      */
 134     header: '&amp;#160;',
 135
 136     actionIdRe: /x-action-col-(\d+)/,
 137
 138 <span id='Ext-grid.column.Action-cfg-altText'>    /**
 139 </span>     * @cfg {String} altText The alt text to use for the image element. Defaults to &lt;tt&gt;''&lt;/tt&gt;.
 140      */
 141     altText: '',
 142
 143     sortable: false,
 144
 145     constructor: function(config) {
 146         var me = this,
 147             cfg = Ext.apply({}, config),
 148             items = cfg.items || [me],
 149             l = items.length,
 150             i,
 151             item;
 152
 153         // This is a Container. Delete the items config to be reinstated after construction.
 154         delete cfg.items;
 155         this.callParent([cfg]);
 156
 157         // Items is an array property of ActionColumns
 158         me.items = items;
 159
 160 //      Renderer closure iterates through items creating an &lt;img&gt; element for each and tagging with an identifying
 161 //      class name x-action-col-{n}
 162         me.renderer = function(v, meta) {
 163 //          Allow a configured renderer to create initial value (And set the other values in the &quot;metadata&quot; argument!)
 164             v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
 165
 166             meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
 167             for (i = 0; i &lt; l; i++) {
 168                 item = items[i];
 169                 v += '&lt;img alt=&quot;' + me.altText + '&quot; src=&quot;' + (item.icon || Ext.BLANK_IMAGE_URL) +
 170                     '&quot; class=&quot;' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' +  (item.iconCls || '') +
 171                     ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')) + '&quot;' +
 172                     ((item.tooltip) ? ' data-qtip=&quot;' + item.tooltip + '&quot;' : '') + ' /&gt;';
 173             }
 174             return v;
 175         };
 176     },
 177
 178     destroy: function() {
 179         delete this.items;
 180         delete this.renderer;
 181         return this.callParent(arguments);
 182     },
 183
 184 <span id='Ext-grid.column.Action-method-processEvent'>    /**
 185 </span>     * @private
 186      * Process and refire events routed from the GridView's processEvent method.
 187      * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
 188      * Returns the event handler's status to allow canceling of GridView's bubbling process.
 189      */
 190     processEvent : function(type, view, cell, recordIndex, cellIndex, e){
 191         var m = e.getTarget().className.match(this.actionIdRe),
 192             item, fn;
 193         if (m &amp;&amp; (item = this.items[parseInt(m[1], 10)])) {
 194             if (type == 'click') {
 195                 fn = item.handler;
 196                 if (fn || this.handler) {
 197                     fn.call(item.scope||this.scope||this, view, recordIndex, cellIndex, item, e);
 198                 }
 199             } else if ((type == 'mousedown') &amp;&amp; (item.stopSelection !== false)) {
 200                 return false;
 201             }
 202         }
 203         return this.callParent(arguments);
 204     },
 205
 206     cascade: function(fn, scope) {
 207         fn.call(scope||this, this);
 208     },
 209
 210     // Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection.
 211     getRefItems: function() {
 212         return [];
 213     }
 214 });</pre></pre></body></html>