Loading form data from the server

An important part of working with forms is loading the data that a form will display. Here's how to create a sample contact form and populate it with data sent from the server.

How to do it...

1. Declare the name and company panel:

   var nameAndCompany = { columnWidth: .5,
      layout: 'form',
      items: [
         { xtype: 'textfield',
           fieldLabel: 'First Name',
           name: 'firstName',
           anchor: '95%'
         },
         {
           xtype: 'textfield',
           fieldLabel: 'Last Name',
           name: 'lastName',
           anchor: '95%'
         },
         {
           xtype: 'textfield',
           fieldLabel: 'Company',
           name: 'company',
           anchor: '95%'
         },
         {
           xtype: 'textfield',
           fieldLabel: 'Title',
           name: 'title',
           anchor: '95%'
         }
      ]
   }
   
   

2. Declare the picture box panel:

   var picBox = {
      columnWidth: .5,
      bodyStyle: 'padding:0px 0px 0px 40px',
      items: [
         { xtype: 'box',
           autoEl: { tag: 'div',
              style: 'padding-bottom:20px',
              html: '<img id="pic" src="' + Ext.BLANK_IMAGE_URL + '"
                class="img-contact" />'
           }
         },
         { xtype: 'button',
           text: 'Change Picture' }
      ]
   }
   

3. Define the Internet panel:

   var internet = { columnWidth: .5,
      layout: 'form',
      items: [
         { xtype: 'fieldset',
           title: 'Internet',
           autoHeight: true,
           defaultType: 'textfield',
           items: [{
              fieldLabel: 'Email',
              name: 'email',
              vtype: 'email',
              anchor: '95%'
            },
            { fieldLabel: 'Web page',
              name: 'webPage',
              vtype: 'url',
              anchor: '95%'
            },
            { fieldLabel: 'IM',
              name: 'imAddress',
              anchor: '95%'
            }]
      }]
   }
   

4. Declare the phone panel:

   var phones = { columnWidth: .5,
      layout: 'form',
      items: [{ xtype: 'fieldset',
         title: 'Phone Numbers',
         autoHeight: true,
         defaultType: 'textfield',
         items: [{
            fieldLabel: 'Home',
            name: 'homePhone',
            anchor: '95%'
          },
          {
            fieldLabel: 'Business',
            name: 'busPhone',
            anchor: '95%'
          },
          {
            fieldLabel: 'Mobile',
            name: 'mobPhone',
            anchor: '95%'
          },
          {
            fieldLabel: 'Fax',
            name: 'fax',
            anchor: '95%'
          }]
      }]
   }
   
   

5. Define the business address panel:

   var busAddress = { columnWidth: .5,
      layout: 'form',
      labelAlign: 'top',
      defaultType: 'textarea',
      items: [{
         fieldLabel: 'Business',
         labelSeparator:'',
         name: 'bAddress',
         anchor: '95%'
       },
       {
         xtype: 'radio',
         boxLabel: 'Mailing Address',
         hideLabel: true,
         name: 'mailingAddress',
         value:'bAddress',
         id:'mailToBAddress'
       }]
   }
   
   

6. Define the home address panel:

   var homeAddress = { columnWidth: .5,
      layout: 'form',
      labelAlign: 'top',
      defaultType: 'textarea',
      items: [{
         fieldLabel: 'Home',
         labelSeparator:'',
         name: 'hAddress',
         anchor: '95%'
       },
       {
         xtype: 'radio',
         boxLabel: 'Mailing Address',
         hideLabel: true,
         name: 'mailingAddress',
         value:'hAddress',
         id:'mailToHAddress'
       }]
   }
   

7. Create the contact form:

   var contactForm = new Ext.FormPanel({
      frame: true,
      title: 'TODO: Load title dynamically',
      bodyStyle: 'padding:5px',
      width: 650,
      items: [{
         bodyStyle: {
         margin: '0px 0px 15px 0px'
       },
       items: [{
          layout: 'column',
          items: [nameAndCompany, picBox]
       }]
      },
      {
         items: [{
            layout: 'column',
            items: [phones, internet]
         }]
      },
      {
         xtype: 'fieldset',
         title: 'Addresses',
         autoHeight: true,
         hideBorders: true,
         layout: 'column',
         items: [busAddress, homeAddress]
      }],
      buttons: [{
         text: 'Save'
      },
      {
         text: 'Cancel'
      }]
   });
   

8. Handle the form's actioncomplete event:

   contactForm.on({
      actioncomplete: function(form, action){
         if(action.type == 'load'){
            var contact = action.result.data;
            Ext.getCmp(contact.mailingAddress).setValue(true);
            contactForm.setTitle(contact.firstName + ' ' +
              contact.lastName);
            Ext.getDom('pic').src = contact.pic;
         }
      }
   });
   
   

9. Render the form:

   contactForm.render(document.body);
   

10. Finally, load the form:

    contactForm.getForm().load({ url: 'contact.php',
       params:{id:'contact1'},
       waitMsg: 'Loading'
    });
    
    
    

How it works...

The contact form's building sequence consists of defining each of the contained panels, and then defining a form panel that will serve as a host. The following screenshot shows the resulting form, with the placement of each of the panels pinpointed:

Moving on to how the form is populated, the JSON-encoded response to a request to provide form data has a structure similar to this:

{success:true,
data:{id:'1',firstName:'Jorge',lastName:'Ramon',
company:'MiamiCoder',title:'Mr',pic:'img/jorger.jpg',
email:'[email protected]',webPage:'http://www.miamicoder.com',
imAddress:'',homePhone:'',busPhone:'555 555-5555',
mobPhone:'',fax:'',
bAddress:'123 Acme Rd #001nMiami, FL 33133',
hAddress:'',mailingAddress:'mailToBAddress'}}

The success property indicates whether the request has succeeded or not. If the request succeeds, success is accompanied by a data property, which contains the contact's information. Although some fields are automatically populated after a call to load(), the form's title, the contact's picture, and the mailing address radio button require further processing. This can be done in the handler for the actioncomplete event:

contactForm.on({
actioncomplete: function(form, action){
if(action.type == 'load'){}
}
});

As already mentioned, the contact's information arrives in the data property of the action's result:

var contact = action.result.data;

The default mailing address comes in the contact's mailingAddress property. Hence, the radio button for the default mailing address is set as shown in the following line of code:

Ext.getCmp(contact.mailingAddress).setValue(true);

The source for the contact's photo is the value of contact.pic:

Ext.getDom('pic').src = contact.pic;

And finally, the title of the form:

contactForm.setTitle(contact.firstName + ' ' + contact.lastName);

There's more...

Although this recipe's focus is on loading form data, you should also pay attention to the layout techniques used—multiple rows, multiple columns, fieldsets—that allow you to achieve rich and flexible user interfaces for your forms.

See Also...

• The next recipe, Serving the XML data to a form, explains how to use a form to load the XML data sent from the server.