/*
 * 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.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.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.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.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().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});                    Ext.fly(charCount.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});                    Ext.fly(clock.getEl().parentNode).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				    });                }            }        }    });        // 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});    });