Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / statusbar / statusbar-demo.js
index c7b0478..7a21d15 100644 (file)
@@ -1,29 +1,35 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
 /*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
+ * Ext JS Library 2.2\r
+ * Copyright(c) 2006-2008, Ext JS, LLC.\r
  * licensing@extjs.com\r
- * \r
+ *\r
  * http://extjs.com/license\r
  */\r
 \r
 \r
 Ext.onReady(function(){\r
-    \r
+\r
     // This is a shared function that simulates a load action on a StatusBar.\r
     // It is reused by most of the example panels.\r
     var loadFn = function(btn, statusBar){\r
         btn = Ext.getCmp(btn);\r
         statusBar = Ext.getCmp(statusBar);\r
-        \r
+\r
         btn.disable();\r
         statusBar.showBusy();\r
-        \r
+\r
         (function(){\r
             statusBar.clearStatus({useDefaults:true});\r
             btn.enable();\r
         }).defer(2000);\r
     };\r
-    \r
+\r
 /*\r
  * ================  Basic StatusBar example  =======================\r
  */\r
@@ -39,7 +45,7 @@ Ext.onReady(function(){
             text: 'Do Loading',\r
             handler: loadFn.createCallback('basic-button', 'basic-statusbar')\r
         }],\r
-        bbar: new Ext.StatusBar({\r
+        bbar: new Ext.ux.StatusBar({\r
             defaultText: 'Default status',\r
             id: 'basic-statusbar',\r
                items: [{\r
@@ -47,7 +53,7 @@ Ext.onReady(function(){
                }, '-', 'Plain Text', ' ', ' ']\r
         })\r
     });\r
-    \r
+\r
 /*\r
  * ================  Right-aligned StatusBar example  =======================\r
  */\r
@@ -63,7 +69,7 @@ Ext.onReady(function(){
             text: 'Do Loading',\r
             handler: loadFn.createCallback('right-button', 'right-statusbar')\r
         }],\r
-        bbar: new Ext.StatusBar({\r
+        bbar: new Ext.ux.StatusBar({\r
             defaultText: 'Default status',\r
             id: 'right-statusbar',\r
             statusAlign: 'right', // the magic config\r
@@ -72,7 +78,7 @@ Ext.onReady(function(){
             }, '-', 'Plain Text', ' ', ' ']\r
         })\r
     });\r
-    \r
+\r
 /*\r
  * ================  StatusBar Window example  =======================\r
  */\r
@@ -90,7 +96,7 @@ Ext.onReady(function(){
             text: 'Do Loading',\r
             handler: loadFn.createCallback('win-button', 'win-statusbar')\r
         }],\r
-        bbar: new Ext.StatusBar({\r
+        bbar: new Ext.ux.StatusBar({\r
             id: 'win-statusbar',\r
             defaultText: 'Ready',\r
             items: [{\r
@@ -106,7 +112,7 @@ Ext.onReady(function(){
             }]\r
         })\r
     });\r
-    \r
+\r
     new Ext.Button({\r
         text: 'Show Window',\r
         renderTo: 'window',\r
@@ -114,20 +120,20 @@ Ext.onReady(function(){
             win.show();\r
         }\r
     });\r
-    \r
+\r
 /*\r
  * ================  Ext Word Processor example  =======================\r
- * \r
- * The StatusBar used in this example is completely standard.  What is \r
+ *\r
+ * The StatusBar used in this example is completely standard.  What is\r
  * customized are the styles and event handling to make the example a\r
  * lot more dynamic and application-oriented.\r
- * \r
+ *\r
  */\r
     // Create these explicitly so we can manipulate them later\r
     var wordCount = new Ext.Toolbar.TextItem('Words: 0');\r
     var charCount = new Ext.Toolbar.TextItem('Chars: 0');\r
     var clock = new Ext.Toolbar.TextItem('');\r
-    \r
+\r
     new Ext.Panel({\r
         title: 'Ext Word Processor',\r
         renderTo: 'word-proc',\r
@@ -135,7 +141,7 @@ Ext.onReady(function(){
         autoHeight: true,\r
         bodyStyle: 'padding:5px;',\r
         layout: 'fit',\r
-        bbar: new Ext.StatusBar({\r
+        bbar: new Ext.ux.StatusBar({\r
             id: 'word-status',\r
             // These are just the standard toolbar TextItems we created above.  They get\r
             // custom classes below in the render handler which is what gives them their\r
@@ -155,7 +161,7 @@ Ext.onReady(function(){
                     fn: function(t){\r
                         var v = t.getValue(),\r
                             wc = 0, cc = v.length ? v.length : 0;\r
-                            \r
+\r
                         if(cc > 0){\r
                             wc = v.match(/\b/g);\r
                             wc = wc ? wc.length / 2 : 0;\r
@@ -168,16 +174,16 @@ Ext.onReady(function(){
             }\r
         },\r
         listeners: {\r
-            'render': {\r
+            render: {\r
                 fn: function(){\r
-                    // Add a class to the parent TD of each text item so we can give them some custom inset box \r
+                    // Add a class to the parent TD of each text item so we can give them some custom inset box\r
                     // styling. Also, since we are using a greedy spacer, we have to add a block level element\r
                     // into each text TD in order to give them a fixed width (TextItems are spans).  Insert a\r
                     // spacer div into each TD using createChild() so that we can give it a width in CSS.\r
-                    Ext.fly(wordCount.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
-                    Ext.fly(charCount.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
-                    Ext.fly(clock.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
-                    \r
+                    Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
+                    Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
+                    Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
+\r
                     // Kick off the clock timer that updates the clock el every second:\r
                                    Ext.TaskMgr.start({\r
                                        run: function(){\r
@@ -185,11 +191,12 @@ Ext.onReady(function(){
                                        },\r
                                        interval: 1000\r
                                    });\r
-                }\r
+                },\r
+                delay: 100\r
             }\r
         }\r
     });\r
-    \r
+\r
     // This sets up a fake auto-save function.  It monitors keyboard activity and after no typing\r
     // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.\r
     // After a fake delay so that you can see the save activity it will update again to indicate\r
@@ -204,5 +211,5 @@ Ext.onReady(function(){
             });\r
         }).defer(4000);\r
     }, this, {buffer:1500});\r
-    \r
+\r
 });
\ No newline at end of file