Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / direct / direct-form.js

diff --git a/examples/direct/direct-form.js b/examples/direct/direct-form.js
index b0257eb..25a3eee 100644 (file)
--- a/examples/direct/direct-form.js
+++ b/examples/direct/direct-form.js
@@ -1,102 +1,112 @@
-/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-// This example illustrates how to load a FormPanel or BasicForm through Ext.Direct.
+Ext.require([
+    'Ext.direct.*',
+    'Ext.form.*',
+    'Ext.tip.QuickTipManager',
+    'Ext.layout.container.Accordion'
+]);
 
-Ext.onReady(function(){
-    // Notice that Direct requests will batch together if they occur
-    // within the enableBuffer delay period (in milliseconds).
-    // Slow the buffering down from the default of 10ms to 100ms
+Ext.onReady(function(){    
+    /*
+     * Notice that Direct requests will batch together if they occur
+     * within the enableBuffer delay period (in milliseconds).
+     * Slow the buffering down from the default of 10ms to 100ms
+     */
     Ext.app.REMOTING_API.enableBuffer = 100;
-    Ext.Direct.addProvider(Ext.app.REMOTING_API);
+    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
     
     // provide feedback for any errors
-    Ext.QuickTips.init();
+    Ext.tip.QuickTipManager.init();
     
-    var basicInfo = new Ext.form.FormPanel({
+    var basicInfo = Ext.create('Ext.form.Panel', {
         // configs for FormPanel
         title: 'Basic Information',
         border: false,
-        padding: 10,
-        buttons:[{
-            text: 'Submit',
-            handler: function(){
-                basicInfo.getForm().submit({
-                    params: {
-                        foo: 'bar',
-                        uid: 34 
-                    }
-                });
-            }
+        bodyPadding: 10,
+        // configs for BasicForm
+        api: {
+            // The server-side method to call for load() requests
+            load: Profile.getBasicInfo,
+            // The server-side must mark the submit handler as a 'formHandler'
+            submit: Profile.updateBasicInfo
+        },
+        // specify the order for the passed params
+        paramOrder: ['uid', 'foo'],
+        dockedItems: [{
+            dock: 'bottom',
+            xtype: 'toolbar',
+            ui: 'footer',
+            style: 'margin: 0 5px 5px 0;',
+            items: ['->', {
+                text: 'Submit',
+                handler: function(){
+                    basicInfo.getForm().submit({
+                        params: {
+                            foo: 'bar',
+                            uid: 34
+                        }
+                    });
+                }      
+            }]
         }],
-
-        // configs apply to child items
-        defaults: {anchor: '-20'}, // provide some room on right for validation errors
         defaultType: 'textfield',
+        defaults: {
+            anchor: '100%'
+        },
         items: [{
             fieldLabel: 'Name',
             name: 'name'
         },{
             fieldLabel: 'Email',
             msgTarget: 'side',
-            name: 'email'        
+            name: 'email'
         },{
             fieldLabel: 'Company',
             name: 'company'
-        }],
-        
-        // configs for BasicForm
-        api: {
-            // The server-side method to call for load() requests
-            load: Profile.getBasicInfo,
-            // The server-side must mark the submit handler as a 'formHandler'
-            submit: Profile.updateBasicInfo
-        },
-        // specify the order for the passed params    
-        paramOrder: ['uid', 'foo']
+        }]
     });
     
-    var phoneInfo = new Ext.form.FormPanel({
+    var phoneInfo = Ext.create('Ext.form.Panel', {
         title: 'Phone Numbers',
         border: false,
         api: {
             load: Profile.getPhoneInfo
-        },    
-        padding: 10,
+        },
+        bodyPadding: 10,
         paramOrder: ['uid'],
         defaultType: 'textfield',
-        defaults: {anchor: '100%'},
+        defaults: {
+            anchor: '100%'
+        },
         items: [{
             fieldLabel: 'Office',
             name: 'office'
         },{
             fieldLabel: 'Cell',
-            name: 'cell'        
+            name: 'cell'
         },{
             fieldLabel: 'Home',
             name: 'home'
         }]
     });
     
-     var locationInfo = new Ext.form.FormPanel({
+    var locationInfo = Ext.create('Ext.form.Panel', {
         title: 'Location Information',
         border: false,
-        padding: 10,
+        bodyPadding: 10,
         api: {
             load: Profile.getLocationInfo
-        },    
+        },
         paramOrder: ['uid'],
         defaultType: 'textfield',
-        defaults: {anchor: '100%'},
+        defaults: {
+            anchor: '100%'
+        },
         items: [{
             fieldLabel: 'Street',
             name: 'street'
         },{
             fieldLabel: 'City',
-            name: 'city'            
+            name: 'city'
         },{
             fieldLabel: 'State',
             name: 'state'
@@ -104,23 +114,23 @@ Ext.onReady(function(){
             fieldLabel: 'Zip',
             name: 'zip'
         }]
-    });    
-
-     var accordion = new Ext.Panel({
+    });
+    
+    var accordion = Ext.create('Ext.panel.Panel', {
         layout: 'accordion',
         renderTo: Ext.getBody(),
         title: 'My Profile',
         width: 300,
-        height: 240,    
+        height: 240,
         items: [basicInfo, phoneInfo, locationInfo]
     });
-        
+    
     // load the forms (notice the load requests will get batched together)
     basicInfo.getForm().load({
         // pass 2 arguments to server side getBasicInfo method (len=2)
         params: {
             foo: 'bar',
-            uid: 34 
+            uid: 34
         }
     });
 
@@ -128,19 +138,18 @@ Ext.onReady(function(){
         params: {
             uid: 5
         }
-    });    
+    });
 
     // defer this request just to simulate the request not getting batched
     // since it exceeds to configured buffer
-    (function(){
+    Ext.Function.defer(function(){
         locationInfo.getForm().load({
             params: {
                 uid: 5
             }
         });
-    }).defer(200);    
-    
+    }, 200);
+
     // rpc call
     TestAction.doEcho('sample');
-
-});
\ No newline at end of file
+});