/ext-4.1.0_b3/docs/source/Action3.html
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:"Michael", lastname:"Scott"},
28 * {firstname:"Dwight", lastname:"Schrute"},
29 * {firstname:"Jim", lastname:"Halpert"},
30 * {firstname:"Kevin", lastname:"Malone"},
31 * {firstname:"Angela", lastname:"Martin"}
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("Edit " + 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("Terminate " + 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="color:red;"').
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="color:red;"').
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 <img> 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 "metadata" argument!)
214 v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
215
216 meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
217 for (; i < 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 += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
226 '" class="' + 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 || '')) + '"' +
228 ((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';
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 && !item.disabled) {
296 fn.call(item.scope || me.scope || me, view, recordIndex, cellIndex, item, e, record, row);
297 }
298 } else if (type == 'mousedown' && 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>