Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / statusbar / statusbar-advanced.js

diff --git a/examples/statusbar/statusbar-advanced.js b/examples/statusbar/statusbar-advanced.js
index 9b79a4e..6d14729 100644 (file)
--- a/examples/statusbar/statusbar-advanced.js
+++ b/examples/statusbar/statusbar-advanced.js
@@ -1,21 +1,30 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-Ext.QuickTips.init();
+Ext.Loader.setConfig({
+    enabled: true
+});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+  'Ext.form.Panel',
+  'Ext.form.field.Date',
+  'Ext.tip.QuickTipManager',
+  'Ext.ux.statusbar.StatusBar',
+  'Ext.ux.statusbar.ValidationStatus'
+]);
 
-Ext.onReady(function(){
 
-    var fp = new Ext.FormPanel({
+Ext.onReady(function(){
+    Ext.tip.QuickTipManager.init();
+    var fp = Ext.create('Ext.FormPanel', {
+        title: 'StatusBar with Integrated Form Validation',
+        renderTo: Ext.getBody(),
+        width: 350,
+        autoHeight: true,
+        layout: 'fit',
         id: 'status-form',
         renderTo: Ext.getBody(),
         labelWidth: 75,
-        width: 350,
-        buttonAlign: 'right',
-        border: false,
-        bodyStyle: 'padding:10px 10px 0;',
+        bodyPadding: 10,
         defaults: {
             anchor: '95%',
             allowBlank: false,
@@ -31,41 +40,37 @@ Ext.onReady(function(){
             fieldLabel: 'Birthdate',
             blankText: 'Birthdate is required'
         }],
-        buttons: [{
-            text: 'Save',
-            handler: function(){
-                if(fp.getForm().isValid()){
-                    var sb = Ext.getCmp('form-statusbar');
-                    sb.showBusy('Saving form...');
-                    fp.getEl().mask();
-                    fp.getForm().submit({
-                        url: 'fake.php',
-                        success: function(){
-                            sb.setStatus({
-                                text:'Form saved!',
-                                iconCls:'',
-                                clear: true
-                            });
-                            fp.getEl().unmask();
-                        }
-                    });
+        dockedItems: [{
+            xtype: 'toolbar',
+            dock: 'bottom',
+            ui: 'footer',
+            items: ['->', {
+                text: 'Save',
+                handler: function(){
+                    if(fp.getForm().isValid()){
+                        var sb = Ext.getCmp('form-statusbar');
+                        sb.showBusy('Saving form...');
+                        fp.getEl().mask();
+                        fp.getForm().submit({
+                            url: 'fake.php',
+                            success: function(){
+                                sb.setStatus({
+                                    text:'Form saved!',
+                                    iconCls:'',
+                                    clear: true
+                                });
+                                fp.getEl().unmask();
+                            }
+                        });
+                    }
                 }
-            }
-        }]
+            }]
+        }, 
+            Ext.create('Ext.ux.StatusBar', {
+                dock: 'bottom',
+                id: 'form-statusbar',
+                defaultText: 'Ready',
+                plugins: Ext.create('Ext.ux.statusbar.ValidationStatus', {form:'status-form'})
+            })]
     });
-
-    new Ext.Panel({
-        title: 'StatusBar with Integrated Form Validation',
-        renderTo: Ext.getBody(),
-        width: 350,
-        autoHeight: true,
-        layout: 'fit',
-        items: fp,
-        bbar: new Ext.ux.StatusBar({
-            id: 'form-statusbar',
-            defaultText: 'Ready',
-            plugins: new Ext.ux.ValidationStatus({form:'status-form'})
-        })
-    });
-
 });
\ No newline at end of file