• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Ext JS 3.0 Cookbook

November 23, 2009 //  by Krishna Srinivasan//  Leave a Comment

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:’ramonj@miamicoder.net’,webPage:’http://www.miamicoder.com’,
imAddress:”,homePhone:”,busPhone:’555 555-5555′,
mobPhone:”,fax:”,
bAddress:’123 Acme Rd \#001\\nMiami, 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 fl exible 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

Pages: Page 1 Page 2 Page 3 Page 4 Page 5 Page 6

Category: ExtJSTag: EXTJS 3

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Pentaho Reporting 3.5 for Java Developers
Next Post: CF AJAX Programming »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact