Action.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  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-Action'>/**
  19. </span> * An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it
  20. * can be usefully shared among multiple components. Actions let you share handlers, configuration options and UI
  21. * updates across any components that support the Action interface (primarily {@link Ext.toolbar.Toolbar},
  22. * {@link Ext.button.Button} and {@link Ext.menu.Menu} components).
  23. *
  24. * Use a single Action instance as the config object for any number of UI Components which share the same configuration. The
  25. * Action not only supplies the configuration, but allows all Components based upon it to have a common set of methods
  26. * called at once through a single call to the Action.
  27. *
  28. * Any Component that is to be configured with an Action must also support
  29. * the following methods:
  30. *
  31. * - setText(string)
  32. * - setIconCls(string)
  33. * - setDisabled(boolean)
  34. * - setVisible(boolean)
  35. * - setHandler(function)
  36. *
  37. * This allows the Action to control its associated Components.
  38. *
  39. * Example usage:
  40. *
  41. * // Define the shared Action. Each Component below will have the same
  42. * // display text and icon, and will display the same message on click.
  43. * var action = new Ext.Action({
  44. * {@link #text}: 'Do something',
  45. * {@link #handler}: function(){
  46. * Ext.Msg.alert('Click', 'You did something.');
  47. * },
  48. * {@link #iconCls}: 'do-something',
  49. * {@link #itemId}: 'myAction'
  50. * });
  51. *
  52. * var panel = new Ext.panel.Panel({
  53. * title: 'Actions',
  54. * width: 500,
  55. * height: 300,
  56. * tbar: [
  57. * // Add the Action directly to a toolbar as a menu button
  58. * action,
  59. * {
  60. * text: 'Action Menu',
  61. * // Add the Action to a menu as a text item
  62. * menu: [action]
  63. * }
  64. * ],
  65. * items: [
  66. * // Add the Action to the panel body as a standard button
  67. * new Ext.button.Button(action)
  68. * ],
  69. * renderTo: Ext.getBody()
  70. * });
  71. *
  72. * // Change the text for all components using the Action
  73. * action.setText('Something else');
  74. *
  75. * // Reference an Action through a container using the itemId
  76. * var btn = panel.getComponent('myAction');
  77. * var aRef = btn.baseAction;
  78. * aRef.setText('New text');
  79. */
  80. Ext.define('Ext.Action', {
  81. /* Begin Definitions */
  82. /* End Definitions */
  83. <span id='Ext-Action-cfg-text'> /**
  84. </span> * @cfg {String} [text='']
  85. * The text to set for all components configured by this Action.
  86. */
  87. <span id='Ext-Action-cfg-iconCls'> /**
  88. </span> * @cfg {String} [iconCls='']
  89. * The CSS class selector that specifies a background image to be used as the header icon for
  90. * all components configured by this Action.
  91. *
  92. * An example of specifying a custom icon class would be something like:
  93. *
  94. * // specify the property in the config for the class:
  95. * ...
  96. * iconCls: 'do-something'
  97. *
  98. * // css class that specifies background image to be used as the icon image:
  99. * .do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
  100. */
  101. <span id='Ext-Action-cfg-disabled'> /**
  102. </span> * @cfg {Boolean} [disabled=false]
  103. * True to disable all components configured by this Action, false to enable them.
  104. */
  105. <span id='Ext-Action-cfg-hidden'> /**
  106. </span> * @cfg {Boolean} [hidden=false]
  107. * True to hide all components configured by this Action, false to show them.
  108. */
  109. <span id='Ext-Action-cfg-handler'> /**
  110. </span> * @cfg {Function} handler
  111. * The function that will be invoked by each component tied to this Action
  112. * when the component's primary event is triggered.
  113. */
  114. <span id='Ext-Action-cfg-itemId'> /**
  115. </span> * @cfg {String} itemId
  116. * See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.
  117. */
  118. <span id='Ext-Action-cfg-scope'> /**
  119. </span> * @cfg {Object} scope
  120. * The scope (this reference) in which the {@link #handler} is executed.
  121. * Defaults to the browser window.
  122. */
  123. <span id='Ext-Action-method-constructor'> /**
  124. </span> * Creates new Action.
  125. * @param {Object} config Config object.
  126. */
  127. constructor : function(config){
  128. this.initialConfig = config;
  129. this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
  130. this.items = [];
  131. },
  132. /*
  133. * @property {Boolean} isAction
  134. * `true` in this class to identify an object as an instantiated Action, or subclass thereof.
  135. */
  136. isAction : true,
  137. <span id='Ext-Action-method-setText'> /**
  138. </span> * Sets the text to be displayed by all components configured by this Action.
  139. * @param {String} text The text to display
  140. */
  141. setText : function(text){
  142. this.initialConfig.text = text;
  143. this.callEach('setText', [text]);
  144. },
  145. <span id='Ext-Action-method-getText'> /**
  146. </span> * Gets the text currently displayed by all components configured by this Action.
  147. */
  148. getText : function(){
  149. return this.initialConfig.text;
  150. },
  151. <span id='Ext-Action-method-setIconCls'> /**
  152. </span> * Sets the icon CSS class for all components configured by this Action. The class should supply
  153. * a background image that will be used as the icon image.
  154. * @param {String} cls The CSS class supplying the icon image
  155. */
  156. setIconCls : function(cls){
  157. this.initialConfig.iconCls = cls;
  158. this.callEach('setIconCls', [cls]);
  159. },
  160. <span id='Ext-Action-method-getIconCls'> /**
  161. </span> * Gets the icon CSS class currently used by all components configured by this Action.
  162. */
  163. getIconCls : function(){
  164. return this.initialConfig.iconCls;
  165. },
  166. <span id='Ext-Action-method-setDisabled'> /**
  167. </span> * Sets the disabled state of all components configured by this Action. Shortcut method
  168. * for {@link #enable} and {@link #disable}.
  169. * @param {Boolean} disabled True to disable the component, false to enable it
  170. */
  171. setDisabled : function(v){
  172. this.initialConfig.disabled = v;
  173. this.callEach('setDisabled', [v]);
  174. },
  175. <span id='Ext-Action-method-enable'> /**
  176. </span> * Enables all components configured by this Action.
  177. */
  178. enable : function(){
  179. this.setDisabled(false);
  180. },
  181. <span id='Ext-Action-method-disable'> /**
  182. </span> * Disables all components configured by this Action.
  183. */
  184. disable : function(){
  185. this.setDisabled(true);
  186. },
  187. <span id='Ext-Action-method-isDisabled'> /**
  188. </span> * Returns true if the components using this Action are currently disabled, else returns false.
  189. */
  190. isDisabled : function(){
  191. return this.initialConfig.disabled;
  192. },
  193. <span id='Ext-Action-method-setHidden'> /**
  194. </span> * Sets the hidden state of all components configured by this Action. Shortcut method
  195. * for `{@link #hide}` and `{@link #show}`.
  196. * @param {Boolean} hidden True to hide the component, false to show it.
  197. */
  198. setHidden : function(v){
  199. this.initialConfig.hidden = v;
  200. this.callEach('setVisible', [!v]);
  201. },
  202. <span id='Ext-Action-method-show'> /**
  203. </span> * Shows all components configured by this Action.
  204. */
  205. show : function(){
  206. this.setHidden(false);
  207. },
  208. <span id='Ext-Action-method-hide'> /**
  209. </span> * Hides all components configured by this Action.
  210. */
  211. hide : function(){
  212. this.setHidden(true);
  213. },
  214. <span id='Ext-Action-method-isHidden'> /**
  215. </span> * Returns true if the components configured by this Action are currently hidden, else returns false.
  216. */
  217. isHidden : function(){
  218. return this.initialConfig.hidden;
  219. },
  220. <span id='Ext-Action-method-setHandler'> /**
  221. </span> * Sets the function that will be called by each Component using this action when its primary event is triggered.
  222. * @param {Function} fn The function that will be invoked by the action's components. The function
  223. * will be called with no arguments.
  224. * @param {Object} scope The scope (this reference) in which the function is executed. Defaults to the Component
  225. * firing the event.
  226. */
  227. setHandler : function(fn, scope){
  228. this.initialConfig.handler = fn;
  229. this.initialConfig.scope = scope;
  230. this.callEach('setHandler', [fn, scope]);
  231. },
  232. <span id='Ext-Action-method-each'> /**
  233. </span> * Executes the specified function once for each Component currently tied to this Action. The function passed
  234. * in should accept a single argument that will be an object that supports the basic Action config/method interface.
  235. * @param {Function} fn The function to execute for each component
  236. * @param {Object} scope The scope (this reference) in which the function is executed.
  237. * Defaults to the Component.
  238. */
  239. each : function(fn, scope){
  240. Ext.each(this.items, fn, scope);
  241. },
  242. // private
  243. callEach : function(fnName, args){
  244. var items = this.items,
  245. i = 0,
  246. len = items.length,
  247. item;
  248. Ext.suspendLayouts();
  249. for(; i &lt; len; i++){
  250. item = items[i];
  251. item[fnName].apply(item, args);
  252. }
  253. Ext.resumeLayouts(true);
  254. },
  255. // private
  256. addComponent : function(comp){
  257. this.items.push(comp);
  258. comp.on('destroy', this.removeComponent, this);
  259. },
  260. // private
  261. removeComponent : function(comp){
  262. Ext.Array.remove(this.items, comp);
  263. },
  264. <span id='Ext-Action-method-execute'> /**
  265. </span> * Executes this Action manually using the handler function specified in the original config object
  266. * or the handler function set with {@link #setHandler}. Any arguments passed to this
  267. * function will be passed on to the handler function.
  268. * @param {Object...} args Variable number of arguments passed to the handler function
  269. */
  270. execute : function(){
  271. this.initialConfig.handler.apply(this.initialConfig.scope || Ext.global, arguments);
  272. }
  273. });
  274. </pre>
  275. </body>
  276. </html>