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