examples/statusbar/statusbar-demo.js

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