examples/form/xml-form.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   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                         emptyText: 'First Name',
  44                         name: 'first',
  45                         width:190
  46                     }, {
  47                         fieldLabel: 'Last Name',
  48                         emptyText: 'Last Name',
  49                         name: 'last',
  50                         width:190
  51                     }, {
  52                         fieldLabel: 'Company',
  53                         name: 'company',
  54                         width:190
  55                     }, {
  56                         fieldLabel: 'Email',
  57                         name: 'email',
  58                         vtype:'email',
  59                         width:190
  60                     },
  61
  62                     new Ext.form.ComboBox({
  63                         fieldLabel: 'State',
  64                         hiddenName:'state',
  65                         store: new Ext.data.ArrayStore({
  66                             fields: ['abbr', 'state'],
  67                             data : Ext.exampledata.states // from states.js
  68                         }),
  69                         valueField:'abbr',
  70                         displayField:'state',
  71                         typeAhead: true,
  72                         mode: 'local',
  73                         triggerAction: 'all',
  74                         emptyText:'Select a state...',
  75                         selectOnFocus:true,
  76                         width:190
  77                     }),
  78
  79                     new Ext.form.DateField({
  80                         fieldLabel: 'Date of Birth',
  81                         name: 'dob',
  82                         width:190,
  83                         allowBlank:false
  84                     })
  85                 ]
  86             })
  87         ]
  88     });
  89
  90     // simple button add
  91     fs.addButton('Load', function(){
  92         fs.getForm().load({url:'xml-form.xml', waitMsg:'Loading'});
  93     });
  94
  95     // explicit add
  96     var submit = fs.addButton({
  97         text: 'Submit',
  98         disabled:true,
  99         handler: function(){
 100             fs.getForm().submit({url:'xml-errors.xml', waitMsg:'Saving Data...', submitEmptyText: false});
 101         }
 102     });
 103
 104     fs.render('form-ct');
 105
 106     fs.on({
 107         actioncomplete: function(form, action){
 108             if(action.type == 'load'){
 109                 submit.enable();
 110             }
 111         }
 112     });
 113
 114 });
 115
 116 // A reusable error reader class for XML forms
 117 Ext.form.XmlErrorReader = function(){
 118     Ext.form.XmlErrorReader.superclass.constructor.call(this, {
 119             record : 'field',
 120             success: '@success'
 121         }, [
 122             'id', 'msg'
 123         ]
 124     );
 125 };
 126 Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);