examples/statusbar/statusbar-demo.js

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