The source code

    /*!
     * Ext JS Library 3.3.1
     * Copyright(c) 2006-2010 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    /**
     * @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.
     *
    new Ext.Panel({
        title: 'StatusBar',
        // etc.
        bbar: new 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
     * @constructor
     * Creates a new StatusBar
     * @param {Object/Array} config A config object
     */
    Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
        /**
         * @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):
    new Ext.Panel({
        title: 'StatusBar',
        // etc.
        bbar: new 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:
    new Ext.Panel({
        title: 'StatusBar',
        // etc.
        bbar: new 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 = new 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';
            }
            Ext.ux.StatusBar.superclass.initComponent.call(this);
        },

        // private
        afterRender : function(){
            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.currIconCls || ''),
                text: this.text || this.defaultText || ''
            });

            if(right){
                this.add('->');
                this.add(this.statusEl);
            }else{
                this.insert(0, this.statusEl);
                this.insert(1, '->');
            }
            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:
         * text {String} : (optional) The status text to display.  If not specified, any current
         * status text will remain unchanged.
         * iconCls {String} : (optional) The CSS class used to customize the status icon (see
         * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.
         * clear {Boolean/Number/Object} : (optional) 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:
         *    wait {Number} : (optional) The number of milliseconds to wait before clearing
         *    (defaults to {@link #autoClear}).
         *    anim {Number} : (optional) False to clear the status immediately once the callback
         *    executes (defaults to true which fades the status out).
         *    useDefaults {Number} : (optional) False to completely clear the status text and iconCls
         *    (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).
         *
         * 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
        }
    });

         * @return {Ext.ux.StatusBar} this
         */
        setStatus : function(o){
            o = o || {};

            if(typeof o == 'string'){
                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(typeof c == 'object'){
                    c = Ext.applyIf(c, defaults);
                    if(c.wait){
                        wait = c.wait;
                    }
                }else if(typeof c == 'number'){
                    wait = c;
                    c = defaults;
                }else if(typeof c == 'boolean'){
                    c = defaults;
                }

                c.threadId = this.activeThreadId;
                this.clearStatus.defer(wait, this, [c]);
            }
            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:
         * anim {Boolean} : (optional) True to clear the status by fading out the status element (defaults
         * to false which clears immediately).
         * useDefaults {Boolean} : (optional) 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} this
         */
        clearStatus : function(o){
            o = o || {};

            if(o.threadId && o.threadId !== this.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 this;
            }

            var text = o.useDefaults ? this.defaultText : this.emptyText,
                iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';

            if(o.anim){
                // animate the statusEl Ext.Element
                this.statusEl.el.fadeOut({
                    remove: false,
                    useDisplay: true,
                    scope: this,
                    callback: function(){
                        this.setStatus({
    	                    text: text,
    	                    iconCls: iconCls
    	                });

                        this.statusEl.el.show();
                    }
                });
            }else{
                // hide/show the el to avoid jumpy text or icon
                this.statusEl.hide();
    	        this.setStatus({
    	            text: text,
    	            iconCls: iconCls
    	        });
                this.statusEl.show();
            }
            return this;
        },

        /**
         * 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} this
         */
        setText : function(text){
            this.activeThreadId++;
            this.text = text || '';
            if(this.rendered){
                this.statusEl.setText(this.text);
            }
            return this;
        },

        /**
         * Returns the current status text.
         * @return {String} The status text
         */
        getText : function(){
            return this.text;
        },

        /**
         * 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} this
         */
        setIcon : function(cls){
            this.activeThreadId++;
            cls = cls || '';

            if(this.rendered){
    	        if(this.currIconCls){
    	            this.statusEl.removeClass(this.currIconCls);
    	            this.currIconCls = null;
    	        }
    	        if(cls.length > 0){
    	            this.statusEl.addClass(cls);
    	            this.currIconCls = cls;
    	        }
            }else{
                this.currIconCls = cls;
            }
            return this;
        },

        /**
         * 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} this
         */
        showBusy : function(o){
            if(typeof o == 'string'){
                o = {text:o};
            }
            o = Ext.applyIf(o || {}, {
                text: this.busyText,
                iconCls: this.busyIconCls
            });
            return this.setStatus(o);
        }
    });
    Ext.reg('statusbar', Ext.ux.StatusBar);