-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js">// This example illustrates how to load a FormPanel or BasicForm through Ext.Direct.
-
-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);
-
- // provide feedback for any errors
- Ext.QuickTips.init();
-
- var basicInfo = new Ext.form.FormPanel({
- // configs for FormPanel
- title: 'Basic Information',
- border: false,
- padding: 10,
- buttons:[{
- 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',
- items: [{
- fieldLabel: 'Name',
- name: 'name'
- },{
- fieldLabel: 'Email',
- msgTarget: 'side',
- name: 'email'
- },{
- 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({
- title: 'Phone Numbers',
- border: false,
- api: {
- load: Profile.getPhoneInfo
- },
- padding: 10,
- paramOrder: ['uid'],
- defaultType: 'textfield',
- defaults: {anchor: '100%'},
- items: [{
- fieldLabel: 'Office',
- name: 'office'
- },{
- fieldLabel: 'Cell',
- name: 'cell'
- },{
- fieldLabel: 'Home',
- name: 'home'
- }]
- });
-
- var locationInfo = new Ext.form.FormPanel({
- title: 'Location Information',
- border: false,
- padding: 10,
- api: {
- load: Profile.getLocationInfo
- },
- paramOrder: ['uid'],
- defaultType: 'textfield',
- defaults: {anchor: '100%'},
- items: [{
- fieldLabel: 'Street',
- name: 'street'
- },{
- fieldLabel: 'City',
- name: 'city'
- },{
- fieldLabel: 'State',
- name: 'state'
- },{
- fieldLabel: 'Zip',
- name: 'zip'
- }]
- });
-
- var accordion = new Ext.Panel({
- layout: 'accordion',
- 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)
- params: {
- foo: 'bar',
- uid: 34
- }
- });
-
- phoneInfo.getForm().load({
- params: {
- uid: 5
- }
- });
-
- // defer this request just to simulate the request not getting batched
- // since it exceeds to configured buffer
- (function(){
- locationInfo.getForm().load({
- params: {
- uid: 5
- }
- });
- }).defer(200);
-
- // rpc call
- TestAction.doEcho('sample');
-
-});</pre> \r
-</body>\r
-</html>
\ No newline at end of file