← Back to branch summary

~hsiung0911/sahana-eden/test

« back to all changes in this revision

Viewing changes to static/scripts/ext-2.2.1/source/widgets/StatusBar.js

  • Committer: eliao
  • Date: 2010-08-01 09:56:45 UTC
  • Revision ID: eliao@ibm-l3bw307-20100801095645-gsq9wcmjan0o0tby
This is my change

Show diffs side-by-side

added added

removed removed

Lines of Context:
static/scripts/ext-2.2.1/source/widgets/StatusBar.js
 
1
/*
 
2
 * Ext JS Library 2.2.1
 
3
 * Copyright(c) 2006-2009, Ext JS, LLC.
 
4
 * licensing@extjs.com
 
5
 * 
 
6
 * http://extjs.com/license
 
7
 */
 
8
 
 
9
/**
 
10
 * @class Ext.StatusBar
 
11
 * <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}.  In addition to
 
12
 * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
 
13
 * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
 
14
 * status text and icon.  You can also indicate that something is processing using the {@link #showBusy} method.</p>
 
15
 * <p><b>Note:</b> Although StatusBar supports xtype:'statusbar', at this time Ext.Toolbar (the base class) does
 
16
 * not support xtype.  For this reason, if you are adding Toolbar items into the StatusBar you must declare it
 
17
 * using the "new StatusBar()" syntax for the items to render correctly.</p> 
 
18
 * <pre><code>
 
19
new Ext.Panel({
 
20
    title: 'StatusBar',
 
21
    // etc.
 
22
    bbar: new Ext.StatusBar({
 
23
        id: 'my-status',
 
24
        
 
25
        // defaults to use when the status is cleared:
 
26
        defaultText: 'Default status text',
 
27
        defaultIconCls: 'default-icon',
 
28
        
 
29
        // values to set initially:
 
30
        text: 'Ready',
 
31
        iconCls: 'ready-icon',
 
32
        
 
33
        // any standard Toolbar items:
 
34
        items: [{
 
35
            text: 'A Button'
 
36
        }, '-', 'Plain Text']
 
37
    })
 
38
});
 
39
 
 
40
// Update the status bar later in code:
 
41
var sb = Ext.getCmp('my-status');
 
42
sb.setStatus({
 
43
    text: 'OK',
 
44
    iconCls: 'ok-icon',
 
45
    clear: true // auto-clear after a set interval
 
46
});
 
47
 
 
48
// Set the status bar to show that something is processing:
 
49
sb.showBusy();
 
50
 
 
51
// processing....
 
52
 
 
53
sb.clearStatus(); // once completeed
 
54
</code></pre>
 
55
 * @extends Ext.Toolbar
 
56
 * @constructor
 
57
 * Creates a new StatusBar
 
58
 * @param {Object/Array} config A config object
 
59
 */
 
60
Ext.StatusBar = Ext.extend(Ext.Toolbar, {
 
61
    /**
 
62
     * @cfg {String} statusAlign
 
63
     * The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
 
64
     * it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
 
65
     * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
 
66
     * rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
 
67
     * expand to take up all sapce left over by any other items.  Example usage:
 
68
     * <pre><code>
 
69
// Create a left-aligned status bar containing a button,
 
70
// separator and text item that will be right-aligned (default):
 
71
new Ext.Panel({
 
72
    title: 'StatusBar',
 
73
    // etc.
 
74
    bbar: new Ext.StatusBar({
 
75
        defaultText: 'Default status text',
 
76
        id: 'status-id',
 
77
        items: [{
 
78
            text: 'A Button'
 
79
        }, '-', 'Plain Text']
 
80
    })
 
81
});
 
82
 
 
83
// By adding the statusAlign config, this will create the
 
84
// exact same toolbar, except the status and toolbar item
 
85
// layout will be reversed from the previous example:
 
86
new Ext.Panel({
 
87
    title: 'StatusBar',
 
88
    // etc.
 
89
    bbar: new Ext.StatusBar({
 
90
        defaultText: 'Default status text',
 
91
        id: 'status-id',
 
92
        statusAlign: 'right',
 
93
        items: [{
 
94
            text: 'A Button'
 
95
        }, '-', 'Plain Text']
 
96
    })
 
97
});
 
98
</code></pre>
 
99
     */
 
100
    /**
 
101
     * @cfg {String} defaultText
 
102
     * The default {@link #text} value.  This will be used anytime the status bar is cleared with the 
 
103
     * <tt>useDefaults:true</tt> option (defaults to '').
 
104
     */
 
105
    /**
 
106
     * @cfg {String} defaultIconCls
 
107
     * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).  
 
108
     * This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').
 
109
     */
 
110
    /**
 
111
     * @cfg {String} text
 
112
     * A string that will be rendered into the status element as the status message (defaults to '');
 
113
     */
 
114
    /**
 
115
     * @cfg {String} iconCls
 
116
     * A CSS class that will be applied to the status element and is expected to provide a background image that will
 
117
     * serve as the status bar icon (defaults to '').  The class is applied directly to the div that also contains the
 
118
     * status text, so the rule should provide the appropriate padding on the div to make room for the image. 
 
119
     * Example usage:<pre><code>
 
120
// Example CSS rule:
 
121
.x-statusbar .x-status-custom {
 
122
    padding-left: 25px;
 
123
    background: transparent url(images/custom-icon.gif) no-repeat 3px 3px;
 
124
}
 
125
 
 
126
// Initializing the status bar:
 
127
var sb = new Ext.StatusBar({
 
128
    defaultIconCls: 'x-status-custom'
 
129
});
 
130
 
 
131
// Setting it in code:
 
132
sb.setStatus({
 
133
    text: 'New status',
 
134
    iconCls: 'x-status-custom'
 
135
});
 
136
</code></pre>
 
137
     */
 
138
    
 
139
    /**
 
140
     * @cfg {String} cls
 
141
     * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
 
142
     */
 
143
    cls : 'x-statusbar',
 
144
    /**
 
145
     * @cfg {String} busyIconCls
 
146
     * The default {@link #iconCls} applied when calling {@link #showBusy} (defaults to 'x-status-busy'). It can be
 
147
     * overridden at any time by passing the <tt>iconCls</tt> argument into <tt>showBusy</tt>. See the 
 
148
     * iconCls docs for additional details about customizing the icon.
 
149
     */
 
150
    busyIconCls : 'x-status-busy',
 
151
    /**
 
152
     * @cfg {String} busyText
 
153
     * The default {@link #text} applied when calling {@link #showBusy} (defaults to 'Loading...'). It can be
 
154
     * overridden at any time by passing the <tt>text</tt> argument into <tt>showBusy</tt>.
 
155
     */
 
156
    busyText : 'Loading...',
 
157
    /**
 
158
     * @cfg {Number} autoClear
 
159
     * The number of milliseconds to wait after setting the status via {@link #setStatus} before automatically
 
160
     * clearing the status text and icon (defaults to 5000).  Note that this only applies when passing the 
 
161
     * <tt>clear</tt> argument to setStatus since that is the only way to defer clearing the status.  This can
 
162
     * be overridden by specifying a different <tt>wait</tt> value in setStatus. Calls to {@link #clearStatus} 
 
163
     * always clear the status bar immediately and ignore this value.
 
164
     */
 
165
    autoClear : 5000,
 
166
    
 
167
    // private
 
168
    activeThreadId : 0,
 
169
    
 
170
    // private
 
171
    initComponent : function(){
 
172
        if(this.statusAlign=='right'){
 
173
            this.cls += ' x-status-right';
 
174
        }
 
175
        Ext.StatusBar.superclass.initComponent.call(this);
 
176
    },
 
177
    
 
178
    // private
 
179
    afterRender : function(){
 
180
        Ext.StatusBar.superclass.afterRender.call(this);
 
181
        
 
182
        var right = this.statusAlign=='right',
 
183
            td = Ext.get(this.nextBlock());
 
184
        
 
185
        if(right){
 
186
            this.tr.appendChild(td.dom);
 
187
        }else{
 
188
            td.insertBefore(this.tr.firstChild);
 
189
        }
 
190
        
 
191
        this.statusEl = td.createChild({
 
192
            cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),
 
193
            html: this.text || this.defaultText || ''
 
194
        });
 
195
        this.statusEl.unselectable();
 
196
        
 
197
        this.spacerEl = td.insertSibling({
 
198
            tag: 'td',
 
199
            style: 'width:100%',
 
200
            cn: [{cls:'ytb-spacer'}]
 
201
        }, right ? 'before' : 'after');
 
202
    },
 
203
 
 
204
    /**
 
205
     * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the 
 
206
     * status that was set after a specified interval.
 
207
     * @param {Object/String} config A config object specifying what status to set, or a string assumed 
 
208
     * to be the status text (and all other options are defaulted as explained below). A config
 
209
     * object containing any or all of the following properties can be passed:<ul>
 
210
     * <li><tt>text</tt> {String} : (optional) The status text to display.  If not specified, any current 
 
211
     * status text will remain unchanged.</li>
 
212
     * <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see 
 
213
     * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>
 
214
     * <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will 
 
215
     * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not 
 
216
     * specified, the new status will not be auto-cleared and will stay until updated again or cleared using 
 
217
     * {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear}, 
 
218
     * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed, 
 
219
     * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value. 
 
220
     * All other options will be defaulted as with the boolean option.  To customize any other options, 
 
221
     * you can pass an object in the format:<ul>
 
222
     *    <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing 
 
223
     *    (defaults to {@link #autoClear}).</li>
 
224
     *    <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback 
 
225
     *    executes (defaults to true which fades the status out).</li>
 
226
     *    <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
 
227
     *    (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>
 
228
     * </ul></li></ul>
 
229
     * Example usage:<pre><code>
 
230
// Simple call to update the text
 
231
statusBar.setStatus('New status');
 
232
 
 
233
// Set the status and icon, auto-clearing with default options:
 
234
statusBar.setStatus({
 
235
    text: 'New status',
 
236
    iconCls: 'x-status-custom',
 
237
    clear: true
 
238
});
 
239
 
 
240
// Auto-clear with custom options:
 
241
statusBar.setStatus({
 
242
    text: 'New status',
 
243
    iconCls: 'x-status-custom',
 
244
    clear: {
 
245
        wait: 8000,
 
246
        anim: false,
 
247
        useDefaults: false
 
248
    }
 
249
});
 
250
</code></pre>
 
251
     * @return {Ext.StatusBar} this
 
252
     */
 
253
    setStatus : function(o){
 
254
        o = o || {};
 
255
        
 
256
        if(typeof o == 'string'){
 
257
            o = {text:o};
 
258
        }
 
259
        if(o.text !== undefined){
 
260
            this.setText(o.text);
 
261
        }
 
262
        if(o.iconCls !== undefined){
 
263
            this.setIcon(o.iconCls);
 
264
        }
 
265
        
 
266
        if(o.clear){
 
267
            var c = o.clear,
 
268
                wait = this.autoClear,
 
269
                defaults = {useDefaults: true, anim: true};
 
270
            
 
271
            if(typeof c == 'object'){
 
272
                c = Ext.applyIf(c, defaults);
 
273
                if(c.wait){
 
274
                    wait = c.wait;
 
275
                }
 
276
            }else if(typeof c == 'number'){
 
277
                wait = c;
 
278
                c = defaults;
 
279
            }else if(typeof c == 'boolean'){
 
280
                c = defaults;
 
281
            }
 
282
            
 
283
            c.threadId = this.activeThreadId;
 
284
            this.clearStatus.defer(wait, this, [c]);
 
285
        }
 
286
        return this;
 
287
    },
 
288
     
 
289
    /**
 
290
     * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
 
291
     * @param {Object} config (optional) A config object containing any or all of the following properties.  If this 
 
292
     * object is not specified the status will be cleared using the defaults below:<ul>
 
293
     * <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
 
294
     * to false which clears immediately).</li>
 
295
     * <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and 
 
296
     * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>
 
297
     * </ul>
 
298
     * @return {Ext.StatusBar} this
 
299
     */
 
300
    clearStatus : function(o){
 
301
        o = o || {};
 
302
        
 
303
        if(o.threadId && o.threadId !== this.activeThreadId){
 
304
            // this means the current call was made internally, but a newer
 
305
            // thread has set a message since this call was deferred.  Since
 
306
            // we don't want to overwrite a newer message just ignore.
 
307
            return this;
 
308
        }
 
309
        
 
310
        var text = o.useDefaults ? this.defaultText : '',
 
311
            iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
 
312
            
 
313
        if(o.anim){
 
314
            this.statusEl.fadeOut({
 
315
                remove: false,
 
316
                useDisplay: true,
 
317
                scope: this,
 
318
                callback: function(){
 
319
                    this.setStatus({
 
320
                            text: text, 
 
321
                            iconCls: iconCls
 
322
                        });
 
323
                    this.statusEl.show();
 
324
                }
 
325
            });
 
326
        }else{
 
327
            // hide/show the el to avoid jumpy text or icon
 
328
            this.statusEl.hide();
 
329
                this.setStatus({
 
330
                    text: text,
 
331
                    iconCls: iconCls
 
332
                });
 
333
            this.statusEl.show();
 
334
        }
 
335
        return this;
 
336
    },
 
337
    
 
338
    /**
 
339
     * Convenience method for setting the status text directly.  For more flexible options see {@link #setStatus}.
 
340
     * @param {String} text (optional) The text to set (defaults to '')
 
341
     * @return {Ext.StatusBar} this
 
342
     */
 
343
    setText : function(text){
 
344
        this.activeThreadId++;
 
345
        this.text = text || '';
 
346
        if(this.rendered){
 
347
            this.statusEl.update(this.text);
 
348
        }
 
349
        return this;
 
350
    },
 
351
    
 
352
    /**
 
353
     * Returns the current status text.
 
354
     * @return {String} The status text
 
355
     */
 
356
    getText : function(){
 
357
        return this.text;
 
358
    },
 
359
 
 
360
    /**
 
361
     * Convenience method for setting the status icon directly.  For more flexible options see {@link #setStatus}.
 
362
     * See {@link #iconCls} for complete details about customizing the icon.
 
363
     * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
 
364
     * @return {Ext.StatusBar} this
 
365
     */
 
366
    setIcon : function(cls){
 
367
        this.activeThreadId++;
 
368
        cls = cls || '';
 
369
        
 
370
        if(this.rendered){
 
371
                if(this.currIconCls){
 
372
                    this.statusEl.removeClass(this.currIconCls);
 
373
                    this.currIconCls = null;
 
374
                }
 
375
                if(cls.length > 0){
 
376
                    this.statusEl.addClass(cls);
 
377
                    this.currIconCls = cls;
 
378
                }
 
379
        }else{
 
380
            this.currIconCls = cls;
 
381
        }
 
382
        return this;
 
383
    },
 
384
    
 
385
    /**
 
386
     * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
 
387
     * a "busy" state, usually for loading or processing activities.
 
388
     * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
 
389
     * string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the 
 
390
     * <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText} 
 
391
     * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and 
 
392
     * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
 
393
     * @return {Ext.StatusBar} this
 
394
     */
 
395
    showBusy : function(o){
 
396
        if(typeof o == 'string'){
 
397
            o = {text:o};
 
398
        }
 
399
        o = Ext.applyIf(o || {}, {
 
400
            text: this.busyText,
 
401
            iconCls: this.busyIconCls
 
402
        });
 
403
        return this.setStatus(o);
 
404
    }
 
405
});
 
406
Ext.reg('statusbar', Ext.StatusBar);