• 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

Serving the XML data to a form


XML is an information interchange format that can be used to provide the data that a form
will display. This recipe shows how to create a contact form that feeds off the XML data that is
sent from the server. This is how the contact form looks like after receiving the XML data:

How to do it…



  1. Build the name, company, picture box, internet, phone, business address,
    and home address panels as explained in the first six steps of the recipe Loading
    form data from the server
    .

  2. Create the contact form and assign it an XmlReader as its data reader:

    var contactForm = new Ext.FormPanel({
    frame: true,
    title: ‘TODO: Load title dynamically’,
    bodyStyle: ‘padding:5px’,
    width: 650,
    url: ‘contact-xml.php’,
    reader: new Ext.data.XmlReader({
    record: ‘contact’,
    success: ‘@success’
    },
    [‘id’, ‘firstName’, ‘lastName’, ‘company’, ‘title’,
    ‘pic’,’email’, ‘webPage’, ‘imAddress’, ‘homePhone’,
    ‘busPhone’,’mobPhone’, ‘fax’, ‘bAddress’, ‘hAddress’,
    ‘mailingAddress’] ),

    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’
    }] });

  3. 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;
    }
    }
    });

  4. Render the form:

    contactForm.render(document.body);

  5. Finally, load the form:

    contactForm.getForm().load({ method:’get’,
    params: { id: ‘contact1’ }, waitMsg: ‘Loading’ });


How it works…


The contact form’s building sequence is similar to the one described in the recipe
Loading form data from the server. This is the resulting form, with the placement of each of
the panels pinpointed:

Although a real-world application will most likely do some processing to generate the XML
information, for this example the server page will generate sample data as simply as this:



<?php
header(“content-type: text/xml”);
echo “<?xml version=\”1.0\” encoding=\”utf-8\” ?>”;
echo “<message success=\”true\”>”;
echo ” <contact>”;
echo ” <id>contact1</id>”;
echo ” <firstName>Jorge</firstName>”;
echo ” <lastName>Ramon</lastName>”;
echo ” <company>MiamiCoder</company>”;
echo ” <title>Mr</title>”;
echo ” <pic>img/jorger.jpg</pic>”;
echo ” <email>ramonj@miamicoder.com</email>”;
echo ” <webPage>http://www.miamicoder.com</webPage>”;
echo ” <imAddress></imAddress>”;
echo ” <homePhone></homePhone>”;
echo ” <busPhone>555 555-5555</busPhone>”;
echo ” <mobPhone></mobPhone>”;
echo ” <fax></fax>”;
echo ” <bAddress>123 Acme Rd #001 Miami, FL 33133</bAddress>”;
echo ” <hAddress></hAddress>”;
echo ” <mailingAddress>mailToBAddress</mailingAddress>”;
echo ” </contact>”;
echo “</message>”;
?>


The data consists of a message entity with a success attribute, which signals whether the
request succeeded, and a contact entity for the contact information.


This data can be read by the form, thanks to the use of an XmlReader instance:



reader: new Ext.data.XmlReader({
record: ‘contact’,
success: ‘@success’
}, [‘id’, ‘firstName’, ‘lastName’, ‘company’, ‘title’, ‘pic’,’email’,
‘webPage’, ‘imAddress’, ‘homePhone’, ‘busPhone’,’mobPhone’,
‘fax’, ‘bAddress’, ‘hAddress’, ‘mailingAddress’] )


The handler for the actioncomplete event is used to process the results of the load or
submit actions:



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


When the handler processes the load action, it sets the default mailing address, the form’s
title, and the contact’s picture.


As 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, and the radio
button for the default mailing address is set as shown in the following 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…


XML is powerful and popular, and it is likely that you will encounter situations where
it’s appropriate to create forms that are able to read XML data. As you saw, this can be
accomplished by using an XmlReader through the reader configuration option, instead of
using the form’s built-in support for processing JSON.


See also…



  • The previous recipe, Loading form data from the server, explains how to populate a
    form with 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