← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/extjs/source/widgets/Action.js

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

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