docs/source/direct-form.html

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