examples/direct/direct-form.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   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         renderTo: Ext.getBody(),
 112         title: 'My Profile',
 113         width: 300,
 114         height: 240,
 115         items: [basicInfo, phoneInfo, locationInfo]
 116     });
 117
 118     // load the forms (notice the load requests will get batched together)
 119     basicInfo.getForm().load({
 120         // pass 2 arguments to server side getBasicInfo method (len=2)
 121         params: {
 122             foo: 'bar',
 123             uid: 34
 124         }
 125     });
 126
 127     phoneInfo.getForm().load({
 128         params: {
 129             uid: 5
 130         }
 131     });
 132
 133     // defer this request just to simulate the request not getting batched
 134     // since it exceeds to configured buffer
 135     (function(){
 136         locationInfo.getForm().load({
 137             params: {
 138                 uid: 5
 139             }
 140         });
 141     }).defer(200);
 142
 143     // rpc call
 144     TestAction.doEcho('sample');
 145
 146 });