examples/direct/direct-form.js

   1 Ext.require([
   2     'Ext.direct.*',
   3     'Ext.form.*',
   4     'Ext.tip.QuickTipManager',
   5     'Ext.layout.container.Accordion'
   6 ]);
   7
   8 Ext.onReady(function(){
   9     /*
  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      */
  14     Ext.app.REMOTING_API.enableBuffer = 100;
  15     Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
  16
  17     // provide feedback for any errors
  18     Ext.tip.QuickTipManager.init();
  19
  20     var basicInfo = Ext.create('Ext.form.Panel', {
  21         // configs for FormPanel
  22         title: 'Basic Information',
  23         border: false,
  24         bodyPadding: 10,
  25         // configs for BasicForm
  26         api: {
  27             // The server-side method to call for load() requests
  28             load: Profile.getBasicInfo,
  29             // The server-side must mark the submit handler as a 'formHandler'
  30             submit: Profile.updateBasicInfo
  31         },
  32         // specify the order for the passed params
  33         paramOrder: ['uid', 'foo'],
  34         dockedItems: [{
  35             dock: 'bottom',
  36             xtype: 'toolbar',
  37             ui: 'footer',
  38             style: 'margin: 0 5px 5px 0;',
  39             items: ['->', {
  40                 text: 'Submit',
  41                 handler: function(){
  42                     basicInfo.getForm().submit({
  43                         params: {
  44                             foo: 'bar',
  45                             uid: 34
  46                         }
  47                     });
  48                 }
  49             }]
  50         }],
  51         defaultType: 'textfield',
  52         defaults: {
  53             anchor: '100%'
  54         },
  55         items: [{
  56             fieldLabel: 'Name',
  57             name: 'name'
  58         },{
  59             fieldLabel: 'Email',
  60             msgTarget: 'side',
  61             name: 'email'
  62         },{
  63             fieldLabel: 'Company',
  64             name: 'company'
  65         }]
  66     });
  67
  68     var phoneInfo = Ext.create('Ext.form.Panel', {
  69         title: 'Phone Numbers',
  70         border: false,
  71         api: {
  72             load: Profile.getPhoneInfo
  73         },
  74         bodyPadding: 10,
  75         paramOrder: ['uid'],
  76         defaultType: 'textfield',
  77         defaults: {
  78             anchor: '100%'
  79         },
  80         items: [{
  81             fieldLabel: 'Office',
  82             name: 'office'
  83         },{
  84             fieldLabel: 'Cell',
  85             name: 'cell'
  86         },{
  87             fieldLabel: 'Home',
  88             name: 'home'
  89         }]
  90     });
  91
  92     var locationInfo = Ext.create('Ext.form.Panel', {
  93         title: 'Location Information',
  94         border: false,
  95         bodyPadding: 10,
  96         api: {
  97             load: Profile.getLocationInfo
  98         },
  99         paramOrder: ['uid'],
 100         defaultType: 'textfield',
 101         defaults: {
 102             anchor: '100%'
 103         },
 104         items: [{
 105             fieldLabel: 'Street',
 106             name: 'street'
 107         },{
 108             fieldLabel: 'City',
 109             name: 'city'
 110         },{
 111             fieldLabel: 'State',
 112             name: 'state'
 113         },{
 114             fieldLabel: 'Zip',
 115             name: 'zip'
 116         }]
 117     });
 118
 119     var accordion = Ext.create('Ext.panel.Panel', {
 120         layout: 'accordion',
 121         renderTo: Ext.getBody(),
 122         title: 'My Profile',
 123         width: 300,
 124         height: 240,
 125         items: [basicInfo, phoneInfo, locationInfo]
 126     });
 127
 128     // load the forms (notice the load requests will get batched together)
 129     basicInfo.getForm().load({
 130         // pass 2 arguments to server side getBasicInfo method (len=2)
 131         params: {
 132             foo: 'bar',
 133             uid: 34
 134         }
 135     });
 136
 137     phoneInfo.getForm().load({
 138         params: {
 139             uid: 5
 140         }
 141     });
 142
 143     // defer this request just to simulate the request not getting batched
 144     // since it exceeds to configured buffer
 145     Ext.Function.defer(function(){
 146         locationInfo.getForm().load({
 147             params: {
 148                 uid: 5
 149             }
 150         });
 151     }, 200);
 152
 153     // rpc call
 154     TestAction.doEcho('sample');
 155 });