examples/form/xml-form.js

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