/** * @class Ext.ux.StatusBar *
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
* @extends Ext.toolbar.Toolbar
* @constructor
* Creates a new StatusBar
* @param {Object/Array} config A config object
*/
Ext.define('Ext.ux.statusbar.StatusBar', {
extend: 'Ext.toolbar.Toolbar',
alternateClassName: 'Ext.ux.StatusBar',
alias: 'widget.statusbar',
requires: ['Ext.toolbar.TextItem'],
/**
* @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 #items} config, or added via {@link #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', {
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', {
defaultText: 'Default status text',
id: 'status-id',
statusAlign: 'right',
items: [{
text: 'A Button'
}, '-', 'Plain Text']
})
});
*/
/**
* @cfg {String} defaultText
* The default {@link #text} value. This will be used anytime the status bar is cleared with the
* useDefaults:true option (defaults to '').
*/
/**
* @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 (defaults to '').
*/
/**
* @cfg {String} text
* A string that will be initially 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.
*/
/**
* @cfg {String} iconCls
* A CSS class that will be initially set as the status bar icon and is
* expected to provide a background image (defaults to '').
* 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', {
defaultIconCls: 'x-status-custom'
});
// Changing the icon:
sb.setStatus({
text: 'New status',
iconCls: 'x-status-custom'
});
*/
/**
* @cfg {String} cls
* The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
*/
cls : 'x-statusbar',
/**
* @cfg {String} busyIconCls
* The default {@link #iconCls}
applied when calling
* {@link #showBusy}
(defaults to 'x-status-busy').
* It can be overridden at any time by passing the iconCls
* argument into {@link #showBusy}
.
*/
busyIconCls : 'x-status-busy',
/**
* @cfg {String} busyText
* The default {@link #text}
applied when calling
* {@link #showBusy}
(defaults to 'Loading...').
* It can be overridden at any time by passing the text
* argument into {@link #showBusy}
.
*/
busyText : 'Loading...',
/**
* @cfg {Number} autoClear
* The number of milliseconds to wait after setting the status via
* {@link #setStatus}
before automatically clearing the status
* text and icon (defaults to 5000). 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,
/**
* @cfg {String} emptyText
* The text string to use if no text has been set. Defaults to
* ' '). 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 : ' ',
// private
activeThreadId : 0,
// private
initComponent : function(){
if (this.statusAlign === 'right') {
this.cls += ' x-status-right';
}
this.callParent(arguments);
},
// private
afterRender : function(){
this.callParent(arguments);
var right = this.statusAlign === 'right';
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.add('->');
this.add(this.statusEl);
} else {
this.insert(0, this.statusEl);
this.insert(1, '->');
}
this.height = 27;
this.doLayout();
},
/**
* Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
* status that was set after a specified interval.
* @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:
// 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
}
});
* @return {Ext.ux.StatusBar} this
*/
setStatus : function(o) {
o = o || {};
if (Ext.isString(o)) {
o = {text:o};
}
if (o.text !== undefined) {
this.setText(o.text);
}
if (o.iconCls !== undefined) {
this.setIcon(o.iconCls);
}
if (o.clear) {
var c = o.clear,
wait = this.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(this.clearStatus, wait, this, [c]);
}
this.doLayout();
return this;
},
/**
* Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
* @param {Object} config (optional) 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: