examples/form/xml-form.js

   1 Ext.require([
   2     'Ext.form.*',
   3     'Ext.data.*'
   4 ]);
   5
   6 Ext.onReady(function(){
   7
   8     Ext.define('example.contact', {
   9         extend: 'Ext.data.Model',
  10         fields: [
  11             {name: 'first', mapping: 'name > first'},
  12             {name: 'last', mapping: 'name > last'},
  13             'company', 'email', 'state',
  14             {name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
  15         ]
  16     });
  17
  18     Ext.define('example.fielderror', {
  19         extend: 'Ext.data.Model',
  20         fields: ['id', 'msg']
  21     });
  22
  23     var formPanel = Ext.create('Ext.form.Panel', {
  24         renderTo: 'form-ct',
  25         frame: true,
  26         title:'XML Form',
  27         width: 340,
  28         bodyPadding: 5,
  29         waitMsgTarget: true,
  30
  31         fieldDefaults: {
  32             labelAlign: 'right',
  33             labelWidth: 85,
  34             msgTarget: 'side'
  35         },
  36
  37         // configure how to read the XML data
  38         reader : Ext.create('Ext.data.reader.Xml', {
  39             model: 'example.contact',
  40             record : 'contact',
  41             successProperty: '@success'
  42         }),
  43
  44         // configure how to read the XML errors
  45         errorReader: Ext.create('Ext.data.reader.Xml', {
  46             model: 'example.fielderror',
  47             record : 'field',
  48             successProperty: '@success'
  49         }),
  50
  51         items: [{
  52             xtype: 'fieldset',
  53             title: 'Contact Information',
  54             defaultType: 'textfield',
  55             defaults: {
  56                 width: 280
  57             },
  58             items: [{
  59                     fieldLabel: 'First Name',
  60                     emptyText: 'First Name',
  61                     name: 'first'
  62                 }, {
  63                     fieldLabel: 'Last Name',
  64                     emptyText: 'Last Name',
  65                     name: 'last'
  66                 }, {
  67                     fieldLabel: 'Company',
  68                     name: 'company'
  69                 }, {
  70                     fieldLabel: 'Email',
  71                     name: 'email',
  72                     vtype:'email'
  73                 }, {
  74                     xtype: 'combobox',
  75                     fieldLabel: 'State',
  76                     name: 'state',
  77                     store: Ext.create('Ext.data.ArrayStore', {
  78                         fields: ['abbr', 'state'],
  79                         data : Ext.example.states // from states.js
  80                     }),
  81                     valueField: 'abbr',
  82                     displayField: 'state',
  83                     typeAhead: true,
  84                     queryMode: 'local',
  85                     emptyText: 'Select a state...'
  86                 }, {
  87                     xtype: 'datefield',
  88                     fieldLabel: 'Date of Birth',
  89                     name: 'dob',
  90                     allowBlank: false
  91                 }
  92             ]
  93         }],
  94
  95         buttons: [{
  96             text: 'Load',
  97             handler: function(){
  98                 formPanel.getForm().load({
  99                     url: 'xml-form-data.xml',
 100                     waitMsg: 'Loading...'
 101                 });
 102             }
 103         }, {
 104             text: 'Submit',
 105             disabled: true,
 106             formBind: true,
 107             handler: function(){
 108                 this.up('form').getForm().submit({
 109                     url: 'xml-form-errors.xml',
 110                     submitEmptyText: false,
 111                     waitMsg: 'Saving Data...'
 112                 });
 113             }
 114         }]
 115     });
 116
 117 });