X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..92c2b89db26be16707f4a805d3303ab2531006e1:/examples/statusbar/statusbar-demo.js?ds=inline diff --git a/examples/statusbar/statusbar-demo.js b/examples/statusbar/statusbar-demo.js index c7b0478e..da2c97d4 100644 --- a/examples/statusbar/statusbar-demo.js +++ b/examples/statusbar/statusbar-demo.js @@ -1,36 +1,33 @@ -/* - * Ext JS Library 2.2.1 - * Copyright(c) 2006-2009, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - - +/*! + * Ext JS Library 3.1.1 + * Copyright(c) 2006-2010 Ext JS, LLC + * licensing@extjs.com + * http://www.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, + width: 550, height: 100, bodyStyle: 'padding:10px;', items:[{ @@ -39,22 +36,59 @@ Ext.onReady(function(){ text: 'Do Loading', handler: loadFn.createCallback('basic-button', 'basic-statusbar') }], - bbar: new Ext.StatusBar({ - defaultText: 'Default status', + bbar: new Ext.ux.StatusBar({ id: 'basic-statusbar', - items: [{ - text: 'A Button' - }, '-', 'Plain Text', ' ', ' '] + + // 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: [ + { + 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 + }); + } + }, + { + text: 'Show Busy', + handler: function (){ + var sb = Ext.getCmp('basic-statusbar'); + // Set the status bar to show that something is processing: + sb.showBusy(); + } + }, + { + text: 'Clear status', + handler: function (){ + var sb = Ext.getCmp('basic-statusbar'); + // once completed + sb.clearStatus(); + } + }, + '-', + 'Plain Text' + ] }) }); - + /* * ================ Right-aligned StatusBar example ======================= */ new Ext.Panel({ title: 'Right-aligned StatusBar', renderTo: 'right-aligned', - width: 350, + width: 550, height: 100, bodyStyle: 'padding:10px;', items:[{ @@ -63,7 +97,7 @@ Ext.onReady(function(){ text: 'Do Loading', handler: loadFn.createCallback('right-button', 'right-statusbar') }], - bbar: new Ext.StatusBar({ + bbar: new Ext.ux.StatusBar({ defaultText: 'Default status', id: 'right-statusbar', statusAlign: 'right', // the magic config @@ -72,7 +106,7 @@ Ext.onReady(function(){ }, '-', 'Plain Text', ' ', ' '] }) }); - + /* * ================ StatusBar Window example ======================= */ @@ -90,7 +124,7 @@ Ext.onReady(function(){ text: 'Do Loading', handler: loadFn.createCallback('win-button', 'win-statusbar') }], - bbar: new Ext.StatusBar({ + bbar: new Ext.ux.StatusBar({ id: 'win-statusbar', defaultText: 'Ready', items: [{ @@ -106,7 +140,7 @@ Ext.onReady(function(){ }] }) }); - + new Ext.Button({ text: 'Show Window', renderTo: 'window', @@ -114,20 +148,20 @@ Ext.onReady(function(){ win.show(); } }); - + /* * ================ Ext Word Processor example ======================= - * - * The StatusBar used in this example is completely standard. What is + * + * 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', @@ -135,7 +169,7 @@ Ext.onReady(function(){ autoHeight: true, bodyStyle: 'padding:5px;', layout: 'fit', - bbar: new Ext.StatusBar({ + 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 @@ -155,7 +189,7 @@ Ext.onReady(function(){ 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; @@ -168,16 +202,16 @@ Ext.onReady(function(){ } }, listeners: { - 'render': { + render: { fn: function(){ - // Add a class to the parent TD of each text item so we can give them some custom inset box + // 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'}); - + 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(){ @@ -185,11 +219,12 @@ Ext.onReady(function(){ }, 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 @@ -204,5 +239,5 @@ Ext.onReady(function(){ }); }).defer(4000); }, this, {buffer:1500}); - + }); \ No newline at end of file