xml-form.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:4k
源码类别:

JavaScript

开发平台:

JavaScript

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