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 d6b20bd..25a3eee 100644 (file)
--- a/examples/direct/direct-form.js
+++ b/examples/direct/direct-form.js
@@ -1,41 +1,57 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.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();
-
-    var basicInfo = new Ext.form.FormPanel({
+    Ext.tip.QuickTipManager.init();
+    
+    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'
@@ -46,29 +62,21 @@ Ext.onReady(function(){
         },{
             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'
@@ -80,17 +88,19 @@ Ext.onReady(function(){
             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'
@@ -105,19 +115,16 @@ Ext.onReady(function(){
             name: 'zip'
         }]
     });
-
-     var accordion = new Ext.Panel({
+    
+    var accordion = Ext.create('Ext.panel.Panel', {
         layout: 'accordion',
-        layoutConfig: {
-            autoWidth : false
-        },
         renderTo: Ext.getBody(),
         title: 'My Profile',
         width: 300,
         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)
@@ -135,15 +142,14 @@ Ext.onReady(function(){
 
     // 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
+});