Note: Although StatusBar supports xtype:'statusbar', at this time Ext.Toolbar (the base class) does - * not support xtype. For this reason, if you are adding Toolbar items into the StatusBar you must declare it - * using the "new StatusBar()" syntax for the items to render correctly.
*
new Ext.Panel({
title: 'StatusBar',
@@ -107,26 +104,28 @@ new Ext.Panel({
*/
/**
* @cfg {String} text
- * A string that will be rendered into the status element as the status message (defaults to '');
+ * 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 applied to the status element and is expected to provide a background image that will
- * serve as the status bar icon (defaults to ''). The class is applied directly to the div that also contains the
- * status text, so the rule should provide the appropriate padding on the div to make room for the image.
+ * 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 3px;
+ background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
}
-// Initializing the status bar:
+// Setting a default icon:
var sb = new Ext.ux.StatusBar({
defaultIconCls: 'x-status-custom'
});
-// Setting it in code:
+// Changing the icon:
sb.setStatus({
text: 'New status',
iconCls: 'x-status-custom'
@@ -141,27 +140,45 @@ sb.setStatus({
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 showBusy. See the
- * iconCls docs for additional details about customizing the icon.
+ * 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 showBusy.
+ * 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 setStatus since that is the only way to defer clearing the status. This can
- * be overridden by specifying a different wait value in setStatus. Calls to {@link #clearStatus}
+ * 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,
@@ -178,8 +195,9 @@ sb.setStatus({
Ext.ux.StatusBar.superclass.afterRender.call(this);
var right = this.statusAlign == 'right';
+ this.currIconCls = this.iconCls || this.defaultIconCls;
this.statusEl = new Ext.Toolbar.TextItem({
- cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),
+ cls: 'x-status-text ' + (this.currIconCls || ''),
text: this.text || this.defaultText || ''
});
@@ -310,11 +328,12 @@ statusBar.setStatus({
return this;
}
- var text = o.useDefaults ? this.defaultText : '',
+ var text = o.useDefaults ? this.defaultText : this.emptyText,
iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
if(o.anim){
- this.statusEl.fadeOut({
+ // animate the statusEl Ext.Element
+ this.statusEl.el.fadeOut({
remove: false,
useDisplay: true,
scope: this,
@@ -323,7 +342,8 @@ statusBar.setStatus({
text: text,
iconCls: iconCls
});
- this.statusEl.show();
+
+ this.statusEl.el.show();
}
});
}else{