X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/statusbar/statusbar-demo.js

diff --git a/examples/statusbar/statusbar-demo.js b/examples/statusbar/statusbar-demo.js
index 47edc805..610bc7da 100644
--- a/examples/statusbar/statusbar-demo.js
+++ b/examples/statusbar/statusbar-demo.js
@@ -1,9 +1,21 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.Loader.setConfig({
+    enabled: true
+});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+  'Ext.panel.Panel',
+  'Ext.button.Button',
+  'Ext.window.Window',
+  'Ext.ux.statusbar.StatusBar',
+  'Ext.toolbar.TextItem',
+  'Ext.menu.Menu',
+  'Ext.toolbar.Spacer',
+  'Ext.button.Split',
+  'Ext.form.field.TextArea'
+]);
+
 Ext.onReady(function(){
 
     // This is a shared function that simulates a load action on a StatusBar.
@@ -15,16 +27,16 @@ Ext.onReady(function(){
         btn.disable();
         statusBar.showBusy();
 
-        (function(){
+         Ext.defer(function(){
             statusBar.clearStatus({useDefaults:true});
             btn.enable();
-        }).defer(2000);
+        }, 2000);
     };
 
 /*
  * ================  Basic StatusBar example  =======================
  */
-    new Ext.Panel({
+    Ext.create('Ext.Panel', {
         title: 'Basic StatusBar',
         renderTo: 'basic',
         width: 550,
@@ -34,9 +46,9 @@ Ext.onReady(function(){
             xtype: 'button',
             id: 'basic-button',
             text: 'Do Loading',
-            handler: loadFn.createCallback('basic-button', 'basic-statusbar')
+            handler: Ext.Function.pass(loadFn, ['basic-button', 'basic-statusbar'])
         }],
-        bbar: new Ext.ux.StatusBar({
+        bbar: Ext.create('Ext.ux.StatusBar', {
             id: 'basic-statusbar',
 
             // defaults to use when the status is cleared:
@@ -50,6 +62,7 @@ Ext.onReady(function(){
             // any standard Toolbar items:
             items: [
                 {
+                    xtype: 'button',
                     text: 'Show Warning & Clear',
                     handler: function (){
                         var sb = Ext.getCmp('basic-statusbar');
@@ -61,6 +74,7 @@ Ext.onReady(function(){
                     }
                 },
                 {
+                    xtype: 'button',
                     text: 'Show Busy',
                     handler: function (){
                         var sb = Ext.getCmp('basic-statusbar');
@@ -69,6 +83,7 @@ Ext.onReady(function(){
                     }
                 },
                 {
+                    xtype: 'button',
                     text: 'Clear status',
                     handler: function (){
                         var sb = Ext.getCmp('basic-statusbar');
@@ -85,7 +100,7 @@ Ext.onReady(function(){
 /*
  * ================  Right-aligned StatusBar example  =======================
  */
-    new Ext.Panel({
+    Ext.create('Ext.Panel', {
         title: 'Right-aligned StatusBar',
         renderTo: 'right-aligned',
         width: 550,
@@ -95,9 +110,9 @@ Ext.onReady(function(){
             xtype: 'button',
             id: 'right-button',
             text: 'Do Loading',
-            handler: loadFn.createCallback('right-button', 'right-statusbar')
+            handler: Ext.Function.pass(loadFn, ['right-button', 'right-statusbar'])
         }],
-        bbar: new Ext.ux.StatusBar({
+        bbar: Ext.create('Ext.ux.StatusBar', {
             defaultText: 'Default status',
             id: 'right-statusbar',
             statusAlign: 'right', // the magic config
@@ -110,7 +125,7 @@ Ext.onReady(function(){
 /*
  * ================  StatusBar Window example  =======================
  */
-    var win = new Ext.Window({
+    var win = Ext.create('Ext.Window', {
         title: 'StatusBar Window',
         width: 400,
         minWidth: 350,
@@ -122,26 +137,27 @@ Ext.onReady(function(){
             xtype: 'button',
             id: 'win-button',
             text: 'Do Loading',
-            handler: loadFn.createCallback('win-button', 'win-statusbar')
+            handler: Ext.Function.pass(loadFn, ['win-button', 'win-statusbar'])
         }],
-        bbar: new Ext.ux.StatusBar({
+        bbar: Ext.create('Ext.ux.StatusBar', {
             id: 'win-statusbar',
             defaultText: 'Ready',
             items: [{
+                xtype: 'button',
                 text: 'A Button'
             }, '-',
-            new Date().format('n/d/Y'), ' ', ' ', '-', {
-                xtype:'tbsplit',
+            Ext.Date.format(new Date(), 'n/d/Y'), ' ', ' ', '-', {
+                xtype:'splitbutton',
                 text:'Status Menu',
                 menuAlign: 'br-tr?',
-                menu: new Ext.menu.Menu({
+                menu: Ext.create('Ext.menu.Menu', {
                     items: [{text: 'Item 1'}, {text: 'Item 2'}]
                 })
             }]
         })
     });
 
-    new Ext.Button({
+    Ext.create('Ext.Button', {
         text: 'Show Window',
         renderTo: 'window',
         handler: function(){
@@ -158,18 +174,18 @@ Ext.onReady(function(){
  *
  */
     // Create these explicitly so we can manipulate them later
-    var wordCount = new Ext.Toolbar.TextItem('Words: 0');
-    var charCount = new Ext.Toolbar.TextItem('Chars: 0');
-    var clock = new Ext.Toolbar.TextItem('');
+    var wordCount = Ext.create('Ext.toolbar.TextItem', {text: 'Words: 0'});
+    var charCount = Ext.create('Ext.toolbar.TextItem', {text: 'Chars: 0'}); 
+    var clock = Ext.create('Ext.toolbar.TextItem', {text: Ext.Date.format(new Date(), 'g:i:s A')});
 
-    new Ext.Panel({
+    Ext.create('Ext.Panel', {
         title: 'Ext Word Processor',
         renderTo: 'word-proc',
         width: 500,
         autoHeight: true,
         bodyStyle: 'padding:5px;',
         layout: 'fit',
-        bbar: new Ext.ux.StatusBar({
+        bbar: Ext.create('Ext.ux.StatusBar', {
             id: 'word-status',
             // These are just the standard toolbar TextItems we created above.  They get
             // custom classes below in the render handler which is what gives them their
@@ -180,6 +196,7 @@ Ext.onReady(function(){
             xtype: 'textarea',
             id: 'word-textarea',
             enableKeyEvents: true,
+            hideLabel: true,
             grow: true,
             growMin: 100,
             growMax: 200,
@@ -194,9 +211,9 @@ Ext.onReady(function(){
                             wc = v.match(/\b/g);
                             wc = wc ? wc.length / 2 : 0;
                         }
-	                    Ext.fly(wordCount.getEl()).update('Words: '+wc);
+                        Ext.fly(wordCount.getEl()).update('Words: '+wc);
                         Ext.fly(charCount.getEl()).update('Chars: '+cc);
-	                },
+                 },
                     buffer: 1 // buffer to allow the value to update first
                 }
             }
@@ -208,17 +225,17 @@ Ext.onReady(function(){
                     // styling. Also, since we are using a greedy spacer, we have to add a block level element
                     // into each text TD in order to give them a fixed width (TextItems are spans).  Insert a
                     // spacer div into each TD using createChild() so that we can give it a width in CSS.
-                    Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
-                    Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
-                    Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
+                    Ext.fly(wordCount.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});
+                    Ext.fly(charCount.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});
+                    Ext.fly(clock.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});
 
                     // Kick off the clock timer that updates the clock el every second:
-				    Ext.TaskMgr.start({
-				        run: function(){
-				            Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
-				        },
-				        interval: 1000
-				    });
+                 Ext.TaskManager.start({
+                     run: function(){
+                         Ext.fly(clock.getEl()).update(Ext.Date.format(new Date(), 'g:i:s A'));
+                     },
+                     interval: 1000
+                 });
                 },
                 delay: 100
             }
@@ -232,12 +249,12 @@ Ext.onReady(function(){
     Ext.fly('word-textarea').on('keypress', function(){
         var sb = Ext.getCmp('word-status');
         sb.showBusy('Saving draft...');
-        (function(){
+         Ext.defer(function(){
             sb.setStatus({
                 iconCls: 'x-status-saved',
-                text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
+                text: 'Draft auto-saved at ' + Ext.Date.format(new Date(), 'g:i:s A')
             });
-        }).defer(4000);
+        }, 4000);
     }, this, {buffer:1500});
 
-});
\ No newline at end of file
+});