Ext.onReady(function(){

   
Ext.QuickTips.init();

   
// turn on validation errors beside the field globally
   
Ext.form.Field.prototype.msgTarget = 'side';

   
var fs = new Ext.FormPanel({
        frame
: true,
        title
:'XML Form',
        labelAlign
: 'right',
        labelWidth
: 85,
        width
:340,
        waitMsgTarget
: true,

       
// configure how to read the XML Data
        reader
: new Ext.data.XmlReader({
            record
: 'contact',
            success
: '@success'
       
}, [
           
{name: 'first', mapping:'name/first'}, // custom mapping
           
{name: 'last', mapping:'name/last'},
           
'company', 'email', 'state',
           
{name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
       
]),

       
// reusable eror reader class defined at the end of this file
        errorReader
: new Ext.form.XmlErrorReader(),

        items
: [
           
new Ext.form.FieldSet({
                title
: 'Contact Information',
                autoHeight
: true,
                defaultType
: 'textfield',
                items
: [{
                        fieldLabel
: 'First Name',
                        name
: 'first',
                        width
:190
                   
}, {
                        fieldLabel
: 'Last Name',
                        name
: 'last',
                        width
:190
                   
}, {
                        fieldLabel
: 'Company',
                        name
: 'company',
                        width
:190
                   
}, {
                        fieldLabel
: 'Email',
                        name
: 'email',
                        vtype
:'email',
                        width
:190
                   
},

                   
new Ext.form.ComboBox({
                        fieldLabel
: 'State',
                        hiddenName
:'state',
                        store
: new Ext.data.ArrayStore({
                            fields
: ['abbr', 'state'],
                            data
: Ext.exampledata.states // from states.js
                       
}),
                        valueField
:'abbr',
                        displayField
:'state',
                        typeAhead
: true,
                        mode
: 'local',
                        triggerAction
: 'all',
                        emptyText
:'Select a state...',
                        selectOnFocus
:true,
                        width
:190
                   
}),

                   
new Ext.form.DateField({
                        fieldLabel
: 'Date of Birth',
                        name
: 'dob',
                        width
:190,
                        allowBlank
:false
                   
})
               
]
           
})
       
]
   
});

   
// simple button add
    fs
.addButton('Load', function(){
        fs
.getForm().load({url:'xml-form.xml', waitMsg:'Loading'});
   
});

   
// explicit add
   
var submit = fs.addButton({
        text
: 'Submit',
        disabled
:true,
        handler
: function(){
            fs
.getForm().submit({url:'xml-errors.xml', waitMsg:'Saving Data...'});
       
}
   
});

    fs
.render('form-ct');

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

});

// A reusable error reader class for XML forms
Ext.form.XmlErrorReader = function(){
   
Ext.form.XmlErrorReader.superclass.constructor.call(this, {
            record
: 'field',
            success
: '@success'
       
}, [
           
'id', 'msg'
       
]
   
);
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);