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