Action.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:8k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.Action
  3.  * <p>An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it
  4.  * can be usefully shared among multiple components.  Actions let you share handlers, configuration options and UI
  5.  * updates across any components that support the Action interface (primarily {@link Ext.Toolbar}, {@link Ext.Button}
  6.  * and {@link Ext.menu.Menu} components).</p>
  7.  * <p>Aside from supporting the config object interface, any component that needs to use Actions must also support
  8.  * the following method list, as these will be called as needed by the Action class: setText(string), setIconCls(string),
  9.  * setDisabled(boolean), setVisible(boolean) and setHandler(function).</p>
  10.  * Example usage:<br>
  11.  * <pre><code>
  12. // Define the shared action.  Each component below will have the same
  13. // display text and icon, and will display the same message on click.
  14. var action = new Ext.Action({
  15.     {@link #text}: 'Do something',
  16.     {@link #handler}: function(){
  17.         Ext.Msg.alert('Click', 'You did something.');
  18.     },
  19.     {@link #iconCls}: 'do-something',
  20.     {@link #itemId}: 'myAction'
  21. });
  22. var panel = new Ext.Panel({
  23.     title: 'Actions',
  24.     width: 500,
  25.     height: 300,
  26.     tbar: [
  27.         // Add the action directly to a toolbar as a menu button
  28.         action,
  29.         {
  30.             text: 'Action Menu',
  31.             // Add the action to a menu as a text item
  32.             menu: [action]
  33.         }
  34.     ],
  35.     items: [
  36.         // Add the action to the panel body as a standard button
  37.         new Ext.Button(action)
  38.     ],
  39.     renderTo: Ext.getBody()
  40. });
  41. // Change the text for all components using the action
  42. action.setText('Something else');
  43. // Reference an action through a container using the itemId
  44. var btn = panel.getComponent('myAction');
  45. var aRef = btn.baseAction;
  46. aRef.setText('New text');
  47. </code></pre>
  48.  * @constructor
  49.  * @param {Object} config The configuration options
  50.  */
  51. Ext.Action = function(config){
  52.     this.initialConfig = config;
  53.     this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
  54.     this.items = [];
  55. }
  56. Ext.Action.prototype = {
  57.     /**
  58.      * @cfg {String} text The text to set for all components using this action (defaults to '').
  59.      */
  60.     /**
  61.      * @cfg {String} iconCls
  62.      * The CSS class selector that specifies a background image to be used as the header icon for
  63.      * all components using this action (defaults to '').
  64.      * <p>An example of specifying a custom icon class would be something like:
  65.      * </p><pre><code>
  66. // specify the property in the config for the class:
  67.      ...
  68.      iconCls: 'do-something'
  69. // css class that specifies background image to be used as the icon image:
  70. .do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
  71. </code></pre>
  72.      */
  73.     /**
  74.      * @cfg {Boolean} disabled True to disable all components using this action, false to enable them (defaults to false).
  75.      */
  76.     /**
  77.      * @cfg {Boolean} hidden True to hide all components using this action, false to show them (defaults to false).
  78.      */
  79.     /**
  80.      * @cfg {Function} handler The function that will be invoked by each component tied to this action
  81.      * when the component's primary event is triggered (defaults to undefined).
  82.      */
  83.     /**
  84.      * @cfg {String} itemId
  85.      * See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.
  86.      */
  87.     /**
  88.      * @cfg {Object} scope The scope in which the {@link #handler} function will execute.
  89.      */
  90.     // private
  91.     isAction : true,
  92.     /**
  93.      * Sets the text to be displayed by all components using this action.
  94.      * @param {String} text The text to display
  95.      */
  96.     setText : function(text){
  97.         this.initialConfig.text = text;
  98.         this.callEach('setText', [text]);
  99.     },
  100.     /**
  101.      * Gets the text currently displayed by all components using this action.
  102.      */
  103.     getText : function(){
  104.         return this.initialConfig.text;
  105.     },
  106.     /**
  107.      * Sets the icon CSS class for all components using this action.  The class should supply
  108.      * a background image that will be used as the icon image.
  109.      * @param {String} cls The CSS class supplying the icon image
  110.      */
  111.     setIconClass : function(cls){
  112.         this.initialConfig.iconCls = cls;
  113.         this.callEach('setIconClass', [cls]);
  114.     },
  115.     /**
  116.      * Gets the icon CSS class currently used by all components using this action.
  117.      */
  118.     getIconClass : function(){
  119.         return this.initialConfig.iconCls;
  120.     },
  121.     /**
  122.      * Sets the disabled state of all components using this action.  Shortcut method
  123.      * for {@link #enable} and {@link #disable}.
  124.      * @param {Boolean} disabled True to disable the component, false to enable it
  125.      */
  126.     setDisabled : function(v){
  127.         this.initialConfig.disabled = v;
  128.         this.callEach('setDisabled', [v]);
  129.     },
  130.     /**
  131.      * Enables all components using this action.
  132.      */
  133.     enable : function(){
  134.         this.setDisabled(false);
  135.     },
  136.     /**
  137.      * Disables all components using this action.
  138.      */
  139.     disable : function(){
  140.         this.setDisabled(true);
  141.     },
  142.     /**
  143.      * Returns true if the components using this action are currently disabled, else returns false.  
  144.      */
  145.     isDisabled : function(){
  146.         return this.initialConfig.disabled;
  147.     },
  148.     /**
  149.      * Sets the hidden state of all components using this action.  Shortcut method
  150.      * for <code>{@link #hide}</code> and <code>{@link #show}</code>.
  151.      * @param {Boolean} hidden True to hide the component, false to show it
  152.      */
  153.     setHidden : function(v){
  154.         this.initialConfig.hidden = v;
  155.         this.callEach('setVisible', [!v]);
  156.     },
  157.     /**
  158.      * Shows all components using this action.
  159.      */
  160.     show : function(){
  161.         this.setHidden(false);
  162.     },
  163.     /**
  164.      * Hides all components using this action.
  165.      */
  166.     hide : function(){
  167.         this.setHidden(true);
  168.     },
  169.     /**
  170.      * Returns true if the components using this action are currently hidden, else returns false.  
  171.      */
  172.     isHidden : function(){
  173.         return this.initialConfig.hidden;
  174.     },
  175.     /**
  176.      * Sets the function that will be called by each component using this action when its primary event is triggered.
  177.      * @param {Function} fn The function that will be invoked by the action's components.  The function
  178.      * will be called with no arguments.
  179.      * @param {Object} scope The scope in which the function will execute
  180.      */
  181.     setHandler : function(fn, scope){
  182.         this.initialConfig.handler = fn;
  183.         this.initialConfig.scope = scope;
  184.         this.callEach('setHandler', [fn, scope]);
  185.     },
  186.     /**
  187.      * Executes the specified function once for each component currently tied to this action.  The function passed
  188.      * in should accept a single argument that will be an object that supports the basic Action config/method interface.
  189.      * @param {Function} fn The function to execute for each component
  190.      * @param {Object} scope The scope in which the function will execute
  191.      */
  192.     each : function(fn, scope){
  193.         Ext.each(this.items, fn, scope);
  194.     },
  195.     // private
  196.     callEach : function(fnName, args){
  197.         var cs = this.items;
  198.         for(var i = 0, len = cs.length; i < len; i++){
  199.             cs[i][fnName].apply(cs[i], args);
  200.         }
  201.     },
  202.     // private
  203.     addComponent : function(comp){
  204.         this.items.push(comp);
  205.         comp.on('destroy', this.removeComponent, this);
  206.     },
  207.     // private
  208.     removeComponent : function(comp){
  209.         this.items.remove(comp);
  210.     },
  211.     /**
  212.      * Executes this action manually using the handler function specified in the original config object
  213.      * or the handler function set with <code>{@link #setHandler}</code>.  Any arguments passed to this
  214.      * function will be passed on to the handler function.
  215.      * @param {Mixed} arg1 (optional) Variable number of arguments passed to the handler function
  216.      * @param {Mixed} arg2 (optional)
  217.      * @param {Mixed} etc... (optional)
  218.      */
  219.     execute : function(){
  220.         this.initialConfig.handler.apply(this.initialConfig.scope || window, arguments);
  221.     }
  222. };