The source code

    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     *
     * http://extjs.com/license
     */

    Ext.onReady(function(){

        // This is a shared function that simulates a load action on a StatusBar.
        // It is reused by most of the example panels.
        var loadFn = function(btn, statusBar){
            btn = Ext.getCmp(btn);
            statusBar = Ext.getCmp(statusBar);

            btn.disable();
            statusBar.showBusy();

            (function(){
                statusBar.clearStatus({useDefaults:true});
                btn.enable();
            }).defer(2000);
        };

    /*
     * ================  Basic StatusBar example  =======================
     */
        new Ext.Panel({
            title: 'Basic StatusBar',
            renderTo: 'basic',
            width: 350,
            height: 100,
            bodyStyle: 'padding:10px;',
            items:[{
                xtype: 'button',
                id: 'basic-button',
                text: 'Do Loading',
                handler: loadFn.createCallback('basic-button', 'basic-statusbar')
            }],
            bbar: new Ext.ux.StatusBar({
                defaultText: 'Default status',
                id: 'basic-statusbar',
    	        items: [{
    	            text: 'A Button'
    	        }, '-', 'Plain Text', ' ', ' ']
            })
        });

    /*
     * ================  Right-aligned StatusBar example  =======================
     */
        new Ext.Panel({
            title: 'Right-aligned StatusBar',
            renderTo: 'right-aligned',
            width: 350,
            height: 100,
            bodyStyle: 'padding:10px;',
            items:[{
                xtype: 'button',
                id: 'right-button',
                text: 'Do Loading',
                handler: loadFn.createCallback('right-button', 'right-statusbar')
            }],
            bbar: new Ext.ux.StatusBar({
                defaultText: 'Default status',
                id: 'right-statusbar',
                statusAlign: 'right', // the magic config
                items: [{
                    text: 'A Button'
                }, '-', 'Plain Text', ' ', ' ']
            })
        });

    /*
     * ================  StatusBar Window example  =======================
     */
        var win = new Ext.Window({
            title: 'StatusBar Window',
            width: 400,
            minWidth: 350,
            height: 150,
            modal: true,
            closeAction: 'hide',
            bodyStyle: 'padding:10px;',
            items:[{
                xtype: 'button',
                id: 'win-button',
                text: 'Do Loading',
                handler: loadFn.createCallback('win-button', 'win-statusbar')
            }],
            bbar: new Ext.ux.StatusBar({
                id: 'win-statusbar',
                defaultText: 'Ready',
                items: [{
                    text: 'A Button'
                }, '-',
                new Date().format('n/d/Y'), ' ', ' ', '-', {
                    xtype:'tbsplit',
                    text:'Status Menu',
                    menuAlign: 'br-tr?',
                    menu: new Ext.menu.Menu({
                        items: [{text: 'Item 1'}, {text: 'Item 2'}]
                    })
                }]
            })
        });

        new Ext.Button({
            text: 'Show Window',
            renderTo: 'window',
            handler: function(){
                win.show();
            }
        });

    /*
     * ================  Ext Word Processor example  =======================
     *
     * The StatusBar used in this example is completely standard.  What is
     * customized are the styles and event handling to make the example a
     * lot more dynamic and application-oriented.
     *
     */
        // Create these explicitly so we can manipulate them later
        var wordCount = new Ext.Toolbar.TextItem('Words: 0');
        var charCount = new Ext.Toolbar.TextItem('Chars: 0');
        var clock = new Ext.Toolbar.TextItem('');

        new Ext.Panel({
            title: 'Ext Word Processor',
            renderTo: 'word-proc',
            width: 500,
            autoHeight: true,
            bodyStyle: 'padding:5px;',
            layout: 'fit',
            bbar: new Ext.ux.StatusBar({
                id: 'word-status',
                // These are just the standard toolbar TextItems we created above.  They get
                // custom classes below in the render handler which is what gives them their
                // customized inset appearance.
                items: [wordCount, ' ', charCount, ' ', clock, ' ']
            }),
            items: {
                xtype: 'textarea',
                id: 'word-textarea',
                enableKeyEvents: true,
                grow: true,
                growMin: 100,
                growMax: 200,
                listeners: {
                    // After each keypress update the word and character count text items
                    'keypress': {
                        fn: function(t){
                            var v = t.getValue(),
                                wc = 0, cc = v.length ? v.length : 0;

                            if(cc > 0){
                                wc = v.match(/\b/g);
                                wc = wc ? wc.length / 2 : 0;
                            }
    	                    Ext.fly(wordCount.getEl()).update('Words: '+wc);
                            Ext.fly(charCount.getEl()).update('Chars: '+cc);
    	                },
                        buffer: 1 // buffer to allow the value to update first
                    }
                }
            },
            listeners: {
                render: {
                    fn: function(){
                        // Add a class to the parent TD of each text item so we can give them some custom inset box
                        // styling. Also, since we are using a greedy spacer, we have to add a block level element
                        // into each text TD in order to give them a fixed width (TextItems are spans).  Insert a
                        // spacer div into each TD using createChild() so that we can give it a width in CSS.
                        Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
                        Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
                        Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});

                        // Kick off the clock timer that updates the clock el every second:
    				    Ext.TaskMgr.start({
    				        run: function(){
    				            Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
    				        },
    				        interval: 1000
    				    });
                    },
                    delay: 100
                }
            }
        });

        // This sets up a fake auto-save function.  It monitors keyboard activity and after no typing
        // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
        // After a fake delay so that you can see the save activity it will update again to indicate
        // that the action succeeded.
        Ext.fly('word-textarea').on('keypress', function(){
            var sb = Ext.getCmp('word-status');
            sb.showBusy('Saving draft...');
            (function(){
                sb.setStatus({
                    iconCls: 'x-status-saved',
                    text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
                });
            }).defer(4000);
        }, this, {buffer:1500});

    });