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