Ext.Loader.setConfig({ enabled: true }); Ext.Loader.setPath('Ext.ux', '../ux/'); Ext.require([ 'Ext.panel.Panel', 'Ext.button.Button', 'Ext.window.Window', 'Ext.ux.statusbar.StatusBar', 'Ext.toolbar.TextItem', 'Ext.menu.Menu', 'Ext.toolbar.Spacer', 'Ext.button.Split', 'Ext.form.field.TextArea' ]); 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(); Ext.defer(function(){ statusBar.clearStatus({useDefaults:true}); btn.enable(); }, 2000); }; /* * ================ Basic StatusBar example ======================= */ Ext.create('Ext.Panel', { title: 'Basic StatusBar', renderTo: 'basic', width: 550, height: 100, bodyPadding: 10, items:[{ xtype: 'button', id: 'basic-button', text: 'Do Loading', handler: Ext.Function.pass(loadFn, ['basic-button', 'basic-statusbar']) }], bbar: Ext.create('Ext.ux.StatusBar', { id: 'basic-statusbar', // defaults to use when the status is cleared: defaultText: 'Default status text', //defaultIconCls: 'default-icon', // values to set initially: text: 'Ready', iconCls: 'x-status-valid', // any standard Toolbar items: items: [ { xtype: 'button', text: 'Show Warning & Clear', handler: function (){ var sb = Ext.getCmp('basic-statusbar'); sb.setStatus({ text: 'Oops!', iconCls: 'x-status-error', clear: true // auto-clear after a set interval }); } }, { xtype: 'button', text: 'Show Busy', handler: function (){ var sb = Ext.getCmp('basic-statusbar'); // Set the status bar to show that something is processing: sb.showBusy(); } }, { xtype: 'button', text: 'Clear status', handler: function (){ var sb = Ext.getCmp('basic-statusbar'); // once completed sb.clearStatus(); } }, '-', 'Plain Text' ] }) }); /* * ================ Right-aligned StatusBar example ======================= */ Ext.create('Ext.Panel', { title: 'Right-aligned StatusBar', renderTo: 'right-aligned', width: 550, height: 100, bodyPadding: 10, items:[{ xtype: 'button', id: 'right-button', text: 'Do Loading', handler: Ext.Function.pass(loadFn, ['right-button', 'right-statusbar']) }], bbar: Ext.create('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 = Ext.create('Ext.Window', { title: 'StatusBar Window', width: 400, minWidth: 350, height: 150, modal: true, closeAction: 'hide', bodyPadding: 10, items:[{ xtype: 'button', id: 'win-button', text: 'Do Loading', handler: Ext.Function.pass(loadFn, ['win-button', 'win-statusbar']) }], bbar: Ext.create('Ext.ux.StatusBar', { id: 'win-statusbar', defaultText: 'Ready', items: [{ xtype: 'button', text: 'A Button' }, '-', Ext.Date.format(new Date(), 'n/d/Y'), ' ', ' ', '-', { xtype:'splitbutton', text:'Status Menu', menuAlign: 'br-tr?', menu: Ext.create('Ext.menu.Menu', { items: [{text: 'Item 1'}, {text: 'Item 2'}] }) }] }) }); Ext.create('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 = Ext.create('Ext.toolbar.TextItem', {text: 'Words: 0'}), charCount = Ext.create('Ext.toolbar.TextItem', {text: 'Chars: 0'}), clock = Ext.create('Ext.toolbar.TextItem', {text: Ext.Date.format(new Date(), 'g:i:s A')}), event = Ext.isOpera ? 'keypress' : 'keydown'; // opera behaves a little weird with keydown Ext.create('Ext.Panel', { title: 'Ext Word Processor', renderTo: 'word-proc', width: 500, bodyPadding: 5, layout: 'fit', bbar: Ext.create('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, hideLabel: true, grow: true, growMin: 100, growMax: 200 }, 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()).addCls('x-status-text-panel').createChild({cls:'spacer'}); Ext.fly(charCount.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'}); Ext.fly(clock.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'}); // Kick off the clock timer that updates the clock el every second: Ext.TaskManager.start({ run: function(){ Ext.fly(clock.getEl()).update(Ext.Date.format(new Date(), '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.getCmp('word-textarea').on(event, function(){ var sb = Ext.getCmp('word-status'); sb.showBusy('Saving draft...'); Ext.defer(function(){ sb.setStatus({ iconCls: 'x-status-saved', text: 'Draft auto-saved at ' + Ext.Date.format(new Date(), 'g:i:s A') }); }, 4000); }, null, {buffer:1500}); // Set up our event for updating the word/char count Ext.getCmp('word-textarea').on(event, function(comp){ var v = comp.getValue(), wc = 0, cc = v.length ? v.length : 0; if (cc > 0) { wc = v.match(/\b/g); wc = wc ? wc.length / 2 : 0; } wordCount.update('Words: ' + wc); charCount.update('Chars: ' + cc); }, null, {buffer: 1}); });