examples/statusbar/statusbar-demo.js

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