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. 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. 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. 3. Define the Internet panel...