examples/statusbar/statusbar-demo.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     // This is a shared function that simulates a load action on a StatusBar.
  10     // It is reused by most of the example panels.
  11     var loadFn = function(btn, statusBar){
  12         btn = Ext.getCmp(btn);
  13         statusBar = Ext.getCmp(statusBar);
  14
  15         btn.disable();
  16         statusBar.showBusy();
  17
  18         (function(){
  19             statusBar.clearStatus({useDefaults:true});
  20             btn.enable();
  21         }).defer(2000);
  22     };
  23
  24 /*
  25  * ================  Basic StatusBar example  =======================
  26  */
  27     new Ext.Panel({
  28         title: 'Basic StatusBar',
  29         renderTo: 'basic',
  30         width: 550,
  31         height: 100,
  32         bodyStyle: 'padding:10px;',
  33         items:[{
  34             xtype: 'button',
  35             id: 'basic-button',
  36             text: 'Do Loading',
  37             handler: loadFn.createCallback('basic-button', 'basic-statusbar')
  38         }],
  39         bbar: new Ext.ux.StatusBar({
  40             id: 'basic-statusbar',
  41
  42             // defaults to use when the status is cleared:
  43             defaultText: 'Default status text',
  44             //defaultIconCls: 'default-icon',
  45
  46             // values to set initially:
  47             text: 'Ready',
  48             iconCls: 'x-status-valid',
  49
  50             // any standard Toolbar items:
  51             items: [
  52                 {
  53                     text: 'Show Warning & Clear',
  54                     handler: function (){
  55                         var sb = Ext.getCmp('basic-statusbar');
  56                         sb.setStatus({
  57                             text: 'Oops!',
  58                             iconCls: 'x-status-error',
  59                             clear: true // auto-clear after a set interval
  60                         });
  61                     }
  62                 },
  63                 {
  64                     text: 'Show Busy',
  65                     handler: function (){
  66                         var sb = Ext.getCmp('basic-statusbar');
  67                         // Set the status bar to show that something is processing:
  68                         sb.showBusy();
  69                     }
  70                 },
  71                 {
  72                     text: 'Clear status',
  73                     handler: function (){
  74                         var sb = Ext.getCmp('basic-statusbar');
  75                         // once completed
  76                         sb.clearStatus();
  77                     }
  78                 },
  79                 '-',
  80                 'Plain Text'
  81             ]
  82         })
  83     });
  84
  85 /*
  86  * ================  Right-aligned StatusBar example  =======================
  87  */
  88     new Ext.Panel({
  89         title: 'Right-aligned StatusBar',
  90         renderTo: 'right-aligned',
  91         width: 550,
  92         height: 100,
  93         bodyStyle: 'padding:10px;',
  94         items:[{
  95             xtype: 'button',
  96             id: 'right-button',
  97             text: 'Do Loading',
  98             handler: loadFn.createCallback('right-button', 'right-statusbar')
  99         }],
 100         bbar: new Ext.ux.StatusBar({
 101             defaultText: 'Default status',
 102             id: 'right-statusbar',
 103             statusAlign: 'right', // the magic config
 104             items: [{
 105                 text: 'A Button'
 106             }, '-', 'Plain Text', ' ', ' ']
 107         })
 108     });
 109
 110 /*
 111  * ================  StatusBar Window example  =======================
 112  */
 113     var win = new Ext.Window({
 114         title: 'StatusBar Window',
 115         width: 400,
 116         minWidth: 350,
 117         height: 150,
 118         modal: true,
 119         closeAction: 'hide',
 120         bodyStyle: 'padding:10px;',
 121         items:[{
 122             xtype: 'button',
 123             id: 'win-button',
 124             text: 'Do Loading',
 125             handler: loadFn.createCallback('win-button', 'win-statusbar')
 126         }],
 127         bbar: new Ext.ux.StatusBar({
 128             id: 'win-statusbar',
 129             defaultText: 'Ready',
 130             items: [{
 131                 text: 'A Button'
 132             }, '-',
 133             new Date().format('n/d/Y'), ' ', ' ', '-', {
 134                 xtype:'tbsplit',
 135                 text:'Status Menu',
 136                 menuAlign: 'br-tr?',
 137                 menu: new Ext.menu.Menu({
 138                     items: [{text: 'Item 1'}, {text: 'Item 2'}]
 139                 })
 140             }]
 141         })
 142     });
 143
 144     new Ext.Button({
 145         text: 'Show Window',
 146         renderTo: 'window',
 147         handler: function(){
 148             win.show();
 149         }
 150     });
 151
 152 /*
 153  * ================  Ext Word Processor example  =======================
 154  *
 155  * The StatusBar used in this example is completely standard.  What is
 156  * customized are the styles and event handling to make the example a
 157  * lot more dynamic and application-oriented.
 158  *
 159  */
 160     // Create these explicitly so we can manipulate them later
 161     var wordCount = new Ext.Toolbar.TextItem('Words: 0');
 162     var charCount = new Ext.Toolbar.TextItem('Chars: 0');
 163     var clock = new Ext.Toolbar.TextItem('');
 164
 165     new Ext.Panel({
 166         title: 'Ext Word Processor',
 167         renderTo: 'word-proc',
 168         width: 500,
 169         autoHeight: true,
 170         bodyStyle: 'padding:5px;',
 171         layout: 'fit',
 172         bbar: new Ext.ux.StatusBar({
 173             id: 'word-status',
 174             // These are just the standard toolbar TextItems we created above.  They get
 175             // custom classes below in the render handler which is what gives them their
 176             // customized inset appearance.
 177             items: [wordCount, ' ', charCount, ' ', clock, ' ']
 178         }),
 179         items: {
 180             xtype: 'textarea',
 181             id: 'word-textarea',
 182             enableKeyEvents: true,
 183             grow: true,
 184             growMin: 100,
 185             growMax: 200,
 186             listeners: {
 187                 // After each keypress update the word and character count text items
 188                 'keypress': {
 189                     fn: function(t){
 190                         var v = t.getValue(),
 191                             wc = 0, cc = v.length ? v.length : 0;
 192
 193                         if(cc > 0){
 194                             wc = v.match(/\b/g);
 195                             wc = wc ? wc.length / 2 : 0;
 196                         }
 197                             Ext.fly(wordCount.getEl()).update('Words: '+wc);
 198                         Ext.fly(charCount.getEl()).update('Chars: '+cc);
 199                         },
 200                     buffer: 1 // buffer to allow the value to update first
 201                 }
 202             }
 203         },
 204         listeners: {
 205             render: {
 206                 fn: function(){
 207                     // Add a class to the parent TD of each text item so we can give them some custom inset box
 208                     // styling. Also, since we are using a greedy spacer, we have to add a block level element
 209                     // into each text TD in order to give them a fixed width (TextItems are spans).  Insert a
 210                     // spacer div into each TD using createChild() so that we can give it a width in CSS.
 211                     Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
 212                     Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
 213                     Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
 214
 215                     // Kick off the clock timer that updates the clock el every second:
 216                                     Ext.TaskMgr.start({
 217                                         run: function(){
 218                                             Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
 219                                         },
 220                                         interval: 1000
 221                                     });
 222                 },
 223                 delay: 100
 224             }
 225         }
 226     });
 227
 228     // This sets up a fake auto-save function.  It monitors keyboard activity and after no typing
 229     // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
 230     // After a fake delay so that you can see the save activity it will update again to indicate
 231     // that the action succeeded.
 232     Ext.fly('word-textarea').on('keypress', function(){
 233         var sb = Ext.getCmp('word-status');
 234         sb.showBusy('Saving draft...');
 235         (function(){
 236             sb.setStatus({
 237                 iconCls: 'x-status-saved',
 238                 text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
 239             });
 240         }).defer(4000);
 241     }, this, {buffer:1500});
 242
 243 });