Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / statusbar / statusbar-advanced.js
index f8df86b..6d14729 100644 (file)
@@ -1,71 +1,76 @@
-/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.QuickTips.init();\r
-\r
-Ext.onReady(function(){\r
-\r
-    var fp = new Ext.FormPanel({\r
-        id: 'status-form',\r
-        renderTo: Ext.getBody(),\r
-        labelWidth: 75,\r
-        width: 350,\r
-        buttonAlign: 'right',\r
-        border: false,\r
-        bodyStyle: 'padding:10px 10px 0;',\r
-        defaults: {\r
-            anchor: '95%',\r
-            allowBlank: false,\r
-            selectOnFocus: true,\r
-            msgTarget: 'side'\r
-        },\r
-        items:[{\r
-            xtype: 'textfield',\r
-            fieldLabel: 'Name',\r
-            blankText: 'Name is required'\r
-        },{\r
-            xtype: 'datefield',\r
-            fieldLabel: 'Birthdate',\r
-            blankText: 'Birthdate is required'\r
-        }],\r
-        buttons: [{\r
-            text: 'Save',\r
-            handler: function(){\r
-                if(fp.getForm().isValid()){\r
-                    var sb = Ext.getCmp('form-statusbar');\r
-                    sb.showBusy('Saving form...');\r
-                    fp.getEl().mask();\r
-                    fp.getForm().submit({\r
-                        url: 'fake.php',\r
-                        success: function(){\r
-                            sb.setStatus({\r
-                                text:'Form saved!',\r
-                                iconCls:'',\r
-                                clear: true\r
-                            });\r
-                            fp.getEl().unmask();\r
-                        }\r
-                    });\r
-                }\r
-            }\r
-        }]\r
-    });\r
-\r
-    new Ext.Panel({\r
-        title: 'StatusBar with Integrated Form Validation',\r
-        renderTo: Ext.getBody(),\r
-        width: 350,\r
-        autoHeight: true,\r
-        layout: 'fit',\r
-        items: fp,\r
-        bbar: new Ext.ux.StatusBar({\r
-            id: 'form-statusbar',\r
-            defaultText: 'Ready',\r
-            plugins: new Ext.ux.ValidationStatus({form:'status-form'})\r
-        })\r
-    });\r
-\r
+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(){
+    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,
+        bodyPadding: 10,
+        defaults: {
+            anchor: '95%',
+            allowBlank: false,
+            selectOnFocus: true,
+            msgTarget: 'side'
+        },
+        items:[{
+            xtype: 'textfield',
+            fieldLabel: 'Name',
+            blankText: 'Name is required'
+        },{
+            xtype: 'datefield',
+            fieldLabel: 'Birthdate',
+            blankText: 'Birthdate is required'
+        }],
+        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'})
+            })]
+    });
 });
\ No newline at end of file