examples/statusbar/statusbar-demo.js

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