git.roojs.org Git - roojs1/blob - examples/form/xml-form.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */\r
  11 Roo.onReady(function(){
  12
  13     Roo.QuickTips.init();
  14
  15     // turn on validation errors beside the field globally
  16     Roo.form.Field.prototype.msgTarget = 'side';
  17
  18     var fs = new Roo.form.Form({
  19         //labelAlign: 'right',
  20         labelWidth: 120,
  21         waitMsgTarget: 'box-bd',
  22
  23         // configure how to read the XML Data
  24         reader : new Roo.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 Roo.form.XmlErrorReader()
  36     });
  37
  38     fs.fieldset(
  39         {legend:'Contact Information'},
  40         new Roo.form.TextField({
  41             fieldLabel: 'First Name',
  42             name: 'first',
  43             width:190
  44         }),
  45
  46         new Roo.form.TextField({
  47             fieldLabel: 'Last Name',
  48             name: 'last',
  49             width:190
  50         }),
  51
  52         new Roo.form.TextField({
  53             fieldLabel: 'Company',
  54             name: 'company',
  55             width:190
  56         }),
  57
  58         new Roo.form.TextField({
  59             fieldLabel: 'Email',
  60             name: 'email',
  61             vtype:'email',
  62             width:190
  63         }),
  64
  65         new Roo.form.ComboBox({
  66             fieldLabel: 'State',
  67             hiddenName:'state',
  68             store: new Roo.data.SimpleStore({
  69                 fields: ['abbr', 'state'],
  70                 data : Roo.exampledata.states // from states.js
  71             }),
  72             valueField:'abbr',
  73             displayField:'state',
  74             typeAhead: true,
  75             mode: 'local',
  76             triggerAction: 'all',
  77             emptyText:'Select a state...',
  78             selectOnFocus:true,
  79             width:190
  80         }),
  81
  82         new Roo.form.DateField({
  83             fieldLabel: 'Date of Birth',
  84             name: 'dob',
  85             width:190,
  86             allowBlank:false
  87         })
  88     );
  89
  90     // simple button add
  91     fs.addButton('Load', function(){
  92         fs.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.submit({url:'xml-errors.xml', waitMsg:'Saving Data...'});
 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 Roo.form.XmlErrorReader = function(){
 118     Roo.form.XmlErrorReader.superclass.constructor.call(this, {
 119             record : 'field',
 120             success: '@success'
 121         }, [
 122             'id', 'msg'
 123         ]
 124     );
 125 };
 126 Roo.extend(Roo.form.XmlErrorReader, Roo.data.XmlReader);