Action3.html
15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-grid-column-Action'>/**
</span> * 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.
*
* @example
* Ext.create('Ext.data.Store', {
* storeId:'employeeStore',
* fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
* data:[
* {firstname:"Michael", lastname:"Scott"},
* {firstname:"Dwight", lastname:"Schrute"},
* {firstname:"Jim", lastname:"Halpert"},
* {firstname:"Kevin", lastname:"Malone"},
* {firstname:"Angela", lastname:"Martin"}
* ]
* });
*
* Ext.create('Ext.grid.Panel', {
* title: 'Action Column Demo',
* store: Ext.data.StoreManager.lookup('employeeStore'),
* columns: [
* {text: 'First Name', dataIndex:'firstname'},
* {text: 'Last Name', dataIndex:'lastname'},
* {
* xtype:'actioncolumn',
* width:50,
* items: [{
* 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: '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()
* });
*
* 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',
<span id='Ext-grid-column-Action-cfg-icon'> /**
</span> * @cfg {String} icon
* The URL of an image to display as the clickable element in the column.
*
* Defaults to `{@link Ext#BLANK_IMAGE_URL}`.
*/
<span id='Ext-grid-column-Action-cfg-iconCls'> /**
</span> * @cfg {String} iconCls
* A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with
* a `{@link #getClass}` function.
*/
<span id='Ext-grid-column-Action-cfg-handler'> /**
</span> * @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 #cfg-items} were not configured).
* @cfg {Event} handler.e The click event.
* @cfg {Ext.data.Model} handler.record The Record underlying the clicked row.
* @cfg {HtmlElement} row The table row clicked upon.
*/
<span id='Ext-grid-column-Action-cfg-scope'> /**
</span> * @cfg {Object} scope
* The scope (**this** reference) in which the `{@link #handler}` and `{@link #getClass}` fuctions are executed.
* Defaults to this Column.
*/
<span id='Ext-grid-column-Action-cfg-tooltip'> /**
</span> * @cfg {String} tooltip
* A tooltip message to be displayed on hover. {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must
* have been initialized.
*/
<span id='Ext-grid-column-Action-cfg-disabled'> /**
</span> * @cfg {Boolean} disabled
* If true, the action will not respond to click events, and will be displayed semi-opaque.
*/
<span id='Ext-grid-column-Action-cfg-stopSelection'> /**
</span> * @cfg {Boolean} [stopSelection=true]
* Prevent grid selection upon mousedown.
*/
<span id='Ext-grid-column-Action-cfg-getClass'> /**
</span> * @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.
*/
<span id='Ext-grid-column-Action-cfg-items'> /**
</span> * @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.
*/
<span id='Ext-grid-column-Action-property-items'> /**
</span> * @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.
*/
actionIdRe: new RegExp(Ext.baseCSSPrefix + 'action-col-(\\d+)'),
<span id='Ext-grid-column-Action-cfg-altText'> /**
</span> * @cfg {String} altText
* The alt text to use for the image element.
*/
altText: '',
<span id='Ext-grid-column-Action-cfg-menuText'> /**
</span> * @cfg {String} menuText=[<i>Actions</i>]
* Text to display in this column's menu item if no {@link #text} was specified as a header.
*/
menuText: '<i>Actions</i>',
sortable: false,
constructor: function(config) {
var me = this,
cfg = Ext.apply({}, config),
items = cfg.items || [me],
hasGetClass,
i,
len;
me.origRenderer = cfg.renderer || me.renderer;
me.origScope = cfg.scope || me.scope;
delete me.renderer;
delete me.scope;
delete cfg.renderer;
delete cfg.scope;
// This is a Container. Delete the items config to be reinstated after construction.
delete cfg.items;
me.callParent([cfg]);
// Items is an array property of ActionColumns
me.items = items;
for (i = 0, len = items.length; i < len; ++i) {
if (items[i].getClass) {
hasGetClass = true;
break;
}
}
// Also need to check for getClass, since it changes how the cell renders
if (me.origRenderer || hasGetClass) {
me.hasCustomRenderer = true;
}
},
// Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
// class name x-action-col-{n}
defaultRenderer: function(v, meta){
var me = this,
prefix = Ext.baseCSSPrefix,
scope = me.origScope || me,
items = me.items,
len = items.length,
i = 0,
item;
// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (; i < len; i++) {
item = items[i];
// Only process the item action setup once.
if (!item.hasActionConfiguration) {
// Apply our documented default to all items
item.stopSelection = me.stopSelection;
item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
item.hasActionConfiguration = true;
}
v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (item.disabled ? prefix + 'item-disabled' : ' ') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';
}
return v;
},
<span id='Ext-grid-column-Action-method-enableAction'> /**
</span> * Enables this ActionColumn's action at the specified index.
* @param {Number/Ext.grid.column.Action} index
* @param {Boolean} [silent=false]
*/
enableAction: function(index, silent) {
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);
if (!silent) {
me.fireEvent('enable', me);
}
},
<span id='Ext-grid-column-Action-method-disableAction'> /**
</span> * Disables this ActionColumn's action at the specified index.
* @param {Number/Ext.grid.column.Action} index
* @param {Boolean} [silent=false]
*/
disableAction: function(index, silent) {
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);
if (!silent) {
me.fireEvent('disable', me);
}
},
destroy: function() {
delete this.items;
delete this.renderer;
return this.callParent(arguments);
},
<span id='Ext-grid-column-Action-method-processEvent'> /**
</span> * @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, record, row){
var me = this,
target = e.getTarget(),
match,
item, fn,
key = type == 'keydown' && e.getKey();
// If the target was not within a cell (ie it's a keydown event from the View), then
// rely on the selection data injected by View.processUIEvent to grab the
// first action icon from the selected cell.
if (key && !Ext.fly(target).findParent(view.cellSelector)) {
target = Ext.fly(cell).down('.' + Ext.baseCSSPrefix + 'action-col-icon', true);
}
// NOTE: The statement below tests the truthiness of an assignment.
if (target && (match = target.className.match(me.actionIdRe))) {
item = me.items[parseInt(match[1], 10)];
if (item) {
if (type == 'click' || (key == e.ENTER || key == e.SPACE)) {
fn = item.handler || me.handler;
if (fn && !item.disabled) {
fn.call(item.scope || me.origScope || me, view, recordIndex, cellIndex, item, e, record, row);
}
} else if (type == 'mousedown' && item.stopSelection !== false) {
return false;
}
}
}
return me.callParent(arguments);
},
cascade: function(fn, scope) {
fn.call(scope||this, this);
},
// Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection.
getRefItems: function() {
return [];
}
});
</pre>
</body>
</html>