PageRenderTime 17ms CodeModel.GetById 9ms app.highlight 5ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.1.0_b3/docs/source/Action3.html

https://bitbucket.org/srogerf/javascript
HTML | 317 lines | 293 code | 24 blank | 0 comment | 0 complexity | d578135775ba7282720215a53aaaeb82 MD5 | raw file
  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 */
 68Ext.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.
 76     *
 77     * Defaults to `{@link Ext#BLANK_IMAGE_URL}`.
 78     */
 79<span id='Ext-grid-column-Action-cfg-iconCls'>    /**
 80</span>     * @cfg {String} iconCls
 81     * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with
 82     * a `{@link #getClass}` function.
 83     */
 84<span id='Ext-grid-column-Action-cfg-handler'>    /**
 85</span>     * @cfg {Function} handler
 86     * A function called when the icon is clicked.
 87     * @cfg {Ext.view.Table} handler.view The owning TableView.
 88     * @cfg {Number} handler.rowIndex The row index clicked on.
 89     * @cfg {Number} handler.colIndex The column index clicked on.
 90     * @cfg {Object} handler.item The clicked item (or this Column if multiple {@link #cfg-items} were not configured).
 91     * @cfg {Event} handler.e The click event.
 92     */
 93<span id='Ext-grid-column-Action-cfg-scope'>    /**
 94</span>     * @cfg {Object} scope
 95     * The scope (**this** reference) in which the `{@link #handler}` and `{@link #getClass}` fuctions are executed.
 96     * Defaults to this Column.
 97     */
 98<span id='Ext-grid-column-Action-cfg-tooltip'>    /**
 99</span>     * @cfg {String} tooltip
100     * A tooltip message to be displayed on hover. {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must
101     * have been initialized.
102     */
103<span id='Ext-grid-column-Action-cfg-disabled'>    /**
104</span>     * @cfg {Boolean} disabled
105     * If true, the action will not respond to click events, and will be displayed semi-opaque.
106     */
107<span id='Ext-grid-column-Action-cfg-stopSelection'>    /**
108</span>     * @cfg {Boolean} [stopSelection=true]
109     * Prevent grid _row_ selection upon mousedown.
110     */
111<span id='Ext-grid-column-Action-cfg-getClass'>    /**
112</span>     * @cfg {Function} getClass
113     * A function which returns the CSS class to apply to the icon image.
114     *
115     * @cfg {Object} getClass.v The value of the column's configured field (if any).
116     *
117     * @cfg {Object} getClass.metadata An object in which you may set the following attributes:
118     * @cfg {String} getClass.metadata.css A CSS class name to add to the cell's TD element.
119     * @cfg {String} getClass.metadata.attr An HTML attribute definition string to apply to the data container
120     * element *within* the table cell (e.g. 'style=&quot;color:red;&quot;').
121     *
122     * @cfg {Ext.data.Model} getClass.r The Record providing the data.
123     *
124     * @cfg {Number} getClass.rowIndex The row index..
125     *
126     * @cfg {Number} getClass.colIndex The column index.
127     *
128     * @cfg {Ext.data.Store} getClass.store The Store which is providing the data Model.
129     */
130<span id='Ext-grid-column-Action-cfg-items'>    /**
131</span>     * @cfg {Object[]} items
132     * An Array which may contain multiple icon definitions, each element of which may contain:
133     *
134     * @cfg {String} items.icon The url of an image to display as the clickable element in the column.
135     *
136     * @cfg {String} items.iconCls A CSS class to apply to the icon image. To determine the class dynamically,
137     * configure the item with a `getClass` function.
138     *
139     * @cfg {Function} items.getClass A function which returns the CSS class to apply to the icon image.
140     * @cfg {Object} items.getClass.v The value of the column's configured field (if any).
141     * @cfg {Object} items.getClass.metadata An object in which you may set the following attributes:
142     * @cfg {String} items.getClass.metadata.css A CSS class name to add to the cell's TD element.
143     * @cfg {String} items.getClass.metadata.attr An HTML attribute definition string to apply to the data
144     * container element _within_ the table cell (e.g. 'style=&quot;color:red;&quot;').
145     * @cfg {Ext.data.Model} items.getClass.r The Record providing the data.
146     * @cfg {Number} items.getClass.rowIndex The row index..
147     * @cfg {Number} items.getClass.colIndex The column index.
148     * @cfg {Ext.data.Store} items.getClass.store The Store which is providing the data Model.
149     *
150     * @cfg {Function} items.handler A function called when the icon is clicked.
151     *
152     * @cfg {Object} items.scope The scope (`this` reference) in which the `handler` and `getClass` functions
153     * are executed. Fallback defaults are this Column's configured scope, then this Column.
154     *
155     * @cfg {String} items.tooltip A tooltip message to be displayed on hover.
156     * @cfg {Boolean} items.disabled If true, the action will not respond to click events, and will be displayed semi-opaque.
157     * {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have been initialized.
158     */
159<span id='Ext-grid-column-Action-property-items'>    /**
160</span>     * @property {Array} items
161     * An array of action items copied from the configured {@link #cfg-items items} configuration. Each will have
162     * an `enable` and `disable` method added which will enable and disable the associated action, and
163     * update the displayed icon accordingly.
164     */
165
166    actionIdRe: new RegExp(Ext.baseCSSPrefix + 'action-col-(\\d+)'),
167
168<span id='Ext-grid-column-Action-cfg-altText'>    /**
169</span>     * @cfg {String} altText
170     * The alt text to use for the image element.
171     */
172    altText: '',
173
174    sortable: false,
175
176    constructor: function(config) {
177        var me = this,
178            cfg = Ext.apply({}, config),
179            items = cfg.items || [me];
180
181
182        me.origRenderer = cfg.renderer || me.renderer;
183        me.origScope = cfg.scope || me.scope;
184        
185        delete me.renderer;
186        delete me.scope;
187        delete cfg.renderer;
188        delete cfg.scope;
189        
190        // This is a Container. Delete the items config to be reinstated after construction.
191        delete cfg.items;
192        me.callParent([cfg]);
193
194        // Items is an array property of ActionColumns
195        me.items = items;
196        
197        if (me.origRenderer) {
198            me.hasCustomRenderer = true;
199        }
200    },
201    
202    // Renderer closure iterates through items creating an &lt;img&gt; element for each and tagging with an identifying
203    // class name x-action-col-{n}
204    defaultRenderer: function(v, meta){
205        var me = this,
206            prefix = Ext.baseCSSPrefix,
207            scope = me.origScope || me,
208            items = me.items,
209            len = items.length,
210            i = 0,
211            item;
212            
213        // Allow a configured renderer to create initial value (And set the other values in the &quot;metadata&quot; argument!)
214        v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
215
216        meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
217        for (; i &lt; len; i++) {
218            item = items[i];
219            if (!item.hasActionConfiguration) {
220                item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
221                item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
222                item.hasActionConfiguration = true;
223            }
224            
225            v += '&lt;img alt=&quot;' + (item.altText || me.altText) + '&quot; src=&quot;' + (item.icon || Ext.BLANK_IMAGE_URL) +
226                '&quot; class=&quot;' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (item.disabled ? prefix + 'item-disabled' : ' ') +
227                ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '&quot;' +
228                ((item.tooltip) ? ' data-qtip=&quot;' + item.tooltip + '&quot;' : '') + ' /&gt;';
229        }
230        return v;    
231    },
232
233<span id='Ext-grid-column-Action-method-enableAction'>    /**
234</span>     * Enables this ActionColumn's action at the specified index.
235     * @param {Number/Ext.grid.column.Action} index
236     * @param {Boolean} [silent=false]
237     */
238    enableAction: function(index, silent) {
239        var me = this;
240
241        if (!index) {
242            index = 0;
243        } else if (!Ext.isNumber(index)) {
244            index = Ext.Array.indexOf(me.items, index);
245        }
246        me.items[index].disabled = false;
247        me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).removeCls(me.disabledCls);
248        if (!silent) {
249            me.fireEvent('enable', me);
250        }
251    },
252
253<span id='Ext-grid-column-Action-method-disableAction'>    /**
254</span>     * Disables this ActionColumn's action at the specified index.
255     * @param {Number/Ext.grid.column.Action} index
256     * @param {Boolean} [silent=false]
257     */
258    disableAction: function(index, silent) {
259        var me = this;
260
261        if (!index) {
262            index = 0;
263        } else if (!Ext.isNumber(index)) {
264            index = Ext.Array.indexOf(me.items, index);
265        }
266        me.items[index].disabled = true;
267        me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).addCls(me.disabledCls);
268        if (!silent) {
269            me.fireEvent('disable', me);
270        }
271    },
272
273    destroy: function() {
274        delete this.items;
275        delete this.renderer;
276        return this.callParent(arguments);
277    },
278
279<span id='Ext-grid-column-Action-method-processEvent'>    /**
280</span>     * @private
281     * Process and refire events routed from the GridView's processEvent method.
282     * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
283     * Returns the event handler's status to allow canceling of GridView's bubbling process.
284     */
285    processEvent : function(type, view, cell, recordIndex, cellIndex, e, record, row){
286        var me = this,
287            match = e.getTarget().className.match(me.actionIdRe),
288            item, fn;
289            
290        if (match) {
291            item = me.items[parseInt(match[1], 10)];
292            if (item) {
293                if (type == 'click') {
294                    fn = item.handler || me.handler;
295                    if (fn &amp;&amp; !item.disabled) {
296                        fn.call(item.scope || me.scope || me, view, recordIndex, cellIndex, item, e, record, row);
297                    }
298                } else if (type == 'mousedown' &amp;&amp; item.stopSelection !== false) {
299                    return false;
300                }
301            }
302        }
303        return me.callParent(arguments);
304    },
305
306    cascade: function(fn, scope) {
307        fn.call(scope||this, this);
308    },
309
310    // Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection.
311    getRefItems: function() {
312        return [];
313    }
314});
315</pre>
316</body>
317</html>