/** * @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} 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.
- *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.
*+ \ No newline at end of filenew Ext.Panel({ title: 'StatusBar', @@ -108,26 +105,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' @@ -142,27 +141,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 theiconCls+ * 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 thetext+ * 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, @@ -179,8 +196,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 || '' }); @@ -311,11 +329,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, @@ -324,7 +343,8 @@ statusBar.setStatus({ text: text, iconCls: iconCls }); - this.statusEl.show(); + + this.statusEl.el.show(); } }); }else{ @@ -408,6 +428,6 @@ statusBar.setStatus({ } }); Ext.reg('statusbar', Ext.ux.StatusBar); -