Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / examples / statusbar / statusbar-demo.js
index c7b0478..da2c97d 100644 (file)
@@ -1,36 +1,33 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-\r
+/*!
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
 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
     new Ext.Panel({\r
         title: 'Basic StatusBar',\r
         renderTo: 'basic',\r
-        width: 350,\r
+        width: 550,\r
         height: 100,\r
         bodyStyle: 'padding:10px;',\r
         items:[{\r
@@ -39,22 +36,59 @@ Ext.onReady(function(){
             text: 'Do Loading',\r
             handler: loadFn.createCallback('basic-button', 'basic-statusbar')\r
         }],\r
-        bbar: new Ext.StatusBar({\r
-            defaultText: 'Default status',\r
+        bbar: new Ext.ux.StatusBar({\r
             id: 'basic-statusbar',\r
-               items: [{\r
-                   text: 'A Button'\r
-               }, '-', 'Plain Text', ' ', ' ']\r
+\r
+            // defaults to use when the status is cleared:\r
+            defaultText: 'Default status text',\r
+            //defaultIconCls: 'default-icon',\r
+        \r
+            // values to set initially:\r
+            text: 'Ready',\r
+            iconCls: 'x-status-valid',\r
+\r
+            // any standard Toolbar items:\r
+            items: [\r
+                {\r
+                    text: 'Show Warning & Clear',\r
+                    handler: function (){\r
+                        var sb = Ext.getCmp('basic-statusbar');\r
+                        sb.setStatus({\r
+                            text: 'Oops!',\r
+                            iconCls: 'x-status-error',\r
+                            clear: true // auto-clear after a set interval\r
+                        });\r
+                    }\r
+                },\r
+                {\r
+                    text: 'Show Busy',\r
+                    handler: function (){\r
+                        var sb = Ext.getCmp('basic-statusbar');\r
+                        // Set the status bar to show that something is processing:\r
+                        sb.showBusy();\r
+                    }\r
+                },\r
+                {\r
+                    text: 'Clear status',\r
+                    handler: function (){\r
+                        var sb = Ext.getCmp('basic-statusbar');\r
+                        // once completed\r
+                        sb.clearStatus(); \r
+                    }\r
+                },\r
+                '-',\r
+                'Plain Text'\r
+            ]\r
         })\r
     });\r
-    \r
+\r
 /*\r
  * ================  Right-aligned StatusBar example  =======================\r
  */\r
     new Ext.Panel({\r
         title: 'Right-aligned StatusBar',\r
         renderTo: 'right-aligned',\r
-        width: 350,\r
+        width: 550,\r
         height: 100,\r
         bodyStyle: 'padding:10px;',\r
         items:[{\r
@@ -63,7 +97,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 +106,7 @@ Ext.onReady(function(){
             }, '-', 'Plain Text', ' ', ' ']\r
         })\r
     });\r
-    \r
+\r
 /*\r
  * ================  StatusBar Window example  =======================\r
  */\r
@@ -90,7 +124,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 +140,7 @@ Ext.onReady(function(){
             }]\r
         })\r
     });\r
-    \r
+\r
     new Ext.Button({\r
         text: 'Show Window',\r
         renderTo: 'window',\r
@@ -114,20 +148,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 +169,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 +189,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 +202,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 +219,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 +239,5 @@ Ext.onReady(function(){
             });\r
         }).defer(4000);\r
     }, this, {buffer:1500});\r
-    \r
+\r
 });
\ No newline at end of file