examples/statusbar/statusbar-demo.js

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