docs/source/xml-form.html

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