examples/direct/direct-form.js

   1 /*!
   2  * Ext JS Library 3.3.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 // This example illustrates how to load a FormPanel or BasicForm through Ext.Direct.
   8
   9 Ext.onReady(function(){
  10     // Notice that Direct requests will batch together if they occur
  11     // within the enableBuffer delay period (in milliseconds).
  12     // Slow the buffering down from the default of 10ms to 100ms
  13     Ext.app.REMOTING_API.enableBuffer = 100;
  14     Ext.Direct.addProvider(Ext.app.REMOTING_API);
  15
  16     // provide feedback for any errors
  17     Ext.QuickTips.init();
  18
  19     var basicInfo = new Ext.form.FormPanel({
  20         // configs for FormPanel
  21         title: 'Basic Information',
  22         border: false,
  23         padding: 10,
  24         buttons:[{
  25             text: 'Submit',
  26             handler: function(){
  27                 basicInfo.getForm().submit({
  28                     params: {
  29                         foo: 'bar',
  30                         uid: 34
  31                     }
  32                 });
  33             }
  34         }],
  35
  36         // configs apply to child items
  37         defaults: {anchor: '-20'}, // provide some room on right for validation errors
  38         defaultType: 'textfield',
  39         items: [{
  40             fieldLabel: 'Name',
  41             name: 'name'
  42         },{
  43             fieldLabel: 'Email',
  44             msgTarget: 'side',
  45             name: 'email'
  46         },{
  47             fieldLabel: 'Company',
  48             name: 'company'
  49         }],
  50
  51         // configs for BasicForm
  52         api: {
  53             // The server-side method to call for load() requests
  54             load: Profile.getBasicInfo,
  55             // The server-side must mark the submit handler as a 'formHandler'
  56             submit: Profile.updateBasicInfo
  57         },
  58         // specify the order for the passed params
  59         paramOrder: ['uid', 'foo']
  60     });
  61
  62     var phoneInfo = new Ext.form.FormPanel({
  63         title: 'Phone Numbers',
  64         border: false,
  65         api: {
  66             load: Profile.getPhoneInfo
  67         },
  68         padding: 10,
  69         paramOrder: ['uid'],
  70         defaultType: 'textfield',
  71         defaults: {anchor: '100%'},
  72         items: [{
  73             fieldLabel: 'Office',
  74             name: 'office'
  75         },{
  76             fieldLabel: 'Cell',
  77             name: 'cell'
  78         },{
  79             fieldLabel: 'Home',
  80             name: 'home'
  81         }]
  82     });
  83
  84      var locationInfo = new Ext.form.FormPanel({
  85         title: 'Location Information',
  86         border: false,
  87         padding: 10,
  88         api: {
  89             load: Profile.getLocationInfo
  90         },
  91         paramOrder: ['uid'],
  92         defaultType: 'textfield',
  93         defaults: {anchor: '100%'},
  94         items: [{
  95             fieldLabel: 'Street',
  96             name: 'street'
  97         },{
  98             fieldLabel: 'City',
  99             name: 'city'
 100         },{
 101             fieldLabel: 'State',
 102             name: 'state'
 103         },{
 104             fieldLabel: 'Zip',
 105             name: 'zip'
 106         }]
 107     });
 108
 109      var accordion = new Ext.Panel({
 110         layout: 'accordion',
 111         layoutConfig: {
 112             autoWidth : false
 113         },
 114         renderTo: Ext.getBody(),
 115         title: 'My Profile',
 116         width: 300,
 117         height: 240,
 118         items: [basicInfo, phoneInfo, locationInfo]
 119     });
 120
 121     // load the forms (notice the load requests will get batched together)
 122     basicInfo.getForm().load({
 123         // pass 2 arguments to server side getBasicInfo method (len=2)
 124         params: {
 125             foo: 'bar',
 126             uid: 34
 127         }
 128     });
 129
 130     phoneInfo.getForm().load({
 131         params: {
 132             uid: 5
 133         }
 134     });
 135
 136     // defer this request just to simulate the request not getting batched
 137     // since it exceeds to configured buffer
 138     (function(){
 139         locationInfo.getForm().load({
 140             params: {
 141                 uid: 5
 142             }
 143         });
 144     }).defer(200);
 145
 146     // rpc call
 147     TestAction.doEcho('sample');
 148
 149 });