examples/form/xml-form.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     Ext.QuickTips.init();
  10
  11     // turn on validation errors beside the field globally
  12     Ext.form.Field.prototype.msgTarget = 'side';
  13
  14     var fs = new Ext.FormPanel({
  15         frame: true,
  16         title:'XML Form',
  17         labelAlign: 'right',
  18         labelWidth: 85,
  19         width:340,
  20         waitMsgTarget: true,
  21
  22         // configure how to read the XML Data
  23         reader : new Ext.data.XmlReader({
  24             record : 'contact',
  25             success: '@success'
  26         }, [
  27             {name: 'first', mapping:'name/first'}, // custom mapping
  28             {name: 'last', mapping:'name/last'},
  29             'company', 'email', 'state',
  30             {name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
  31         ]),
  32
  33         // reusable eror reader class defined at the end of this file
  34         errorReader: new Ext.form.XmlErrorReader(),
  35
  36         items: [
  37             new Ext.form.FieldSet({
  38                 title: 'Contact Information',
  39                 autoHeight: true,
  40                 defaultType: 'textfield',
  41                 items: [{
  42                         fieldLabel: 'First Name',
  43                         name: 'first',
  44                         width:190
  45                     }, {
  46                         fieldLabel: 'Last Name',
  47                         name: 'last',
  48                         width:190
  49                     }, {
  50                         fieldLabel: 'Company',
  51                         name: 'company',
  52                         width:190
  53                     }, {
  54                         fieldLabel: 'Email',
  55                         name: 'email',
  56                         vtype:'email',
  57                         width:190
  58                     },
  59
  60                     new Ext.form.ComboBox({
  61                         fieldLabel: 'State',
  62                         hiddenName:'state',
  63                         store: new Ext.data.ArrayStore({
  64                             fields: ['abbr', 'state'],
  65                             data : Ext.exampledata.states // from states.js
  66                         }),
  67                         valueField:'abbr',
  68                         displayField:'state',
  69                         typeAhead: true,
  70                         mode: 'local',
  71                         triggerAction: 'all',
  72                         emptyText:'Select a state...',
  73                         selectOnFocus:true,
  74                         width:190
  75                     }),
  76
  77                     new Ext.form.DateField({
  78                         fieldLabel: 'Date of Birth',
  79                         name: 'dob',
  80                         width:190,
  81                         allowBlank:false
  82                     })
  83                 ]
  84             })
  85         ]
  86     });
  87
  88     // simple button add
  89     fs.addButton('Load', function(){
  90         fs.getForm().load({url:'xml-form.xml', waitMsg:'Loading'});
  91     });
  92
  93     // explicit add
  94     var submit = fs.addButton({
  95         text: 'Submit',
  96         disabled:true,
  97         handler: function(){
  98             fs.getForm().submit({url:'xml-errors.xml', waitMsg:'Saving Data...'});
  99         }
 100     });
 101
 102     fs.render('form-ct');
 103
 104     fs.on({
 105         actioncomplete: function(form, action){
 106             if(action.type == 'load'){
 107                 submit.enable();
 108             }
 109         }
 110     });
 111
 112 });
 113
 114 // A reusable error reader class for XML forms
 115 Ext.form.XmlErrorReader = function(){
 116     Ext.form.XmlErrorReader.superclass.constructor.call(this, {
 117             record : 'field',
 118             success: '@success'
 119         }, [
 120             'id', 'msg'
 121         ]
 122     );
 123 };
 124 Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);