X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775:/docs/source/statusbar-demo.html?ds=sidebyside diff --git a/docs/source/statusbar-demo.html b/docs/source/statusbar-demo.html deleted file mode 100644 index 8f077b33..00000000 --- a/docs/source/statusbar-demo.html +++ /dev/null @@ -1,218 +0,0 @@ - -
-/* - * 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}); - -});- - \ No newline at end of file