X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/form/xml-form.js

diff --git a/examples/form/xml-form.js b/examples/form/xml-form.js
index 197fdadf..c7aea170 100644
--- a/examples/form/xml-form.js
+++ b/examples/form/xml-form.js
@@ -1,126 +1,117 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.require([
+    'Ext.form.*',
+    'Ext.data.*'
+]);
+
 Ext.onReady(function(){
 
-    Ext.QuickTips.init();
+    Ext.define('example.contact', {
+        extend: 'Ext.data.Model',
+        fields: [
+            {name: 'first', mapping: 'name > first'},
+            {name: 'last', mapping: 'name > last'},
+            'company', 'email', 'state',
+            {name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
+        ]
+    });
 
-    // turn on validation errors beside the field globally
-    Ext.form.Field.prototype.msgTarget = 'side';
+    Ext.define('example.fielderror', {
+        extend: 'Ext.data.Model',
+        fields: ['id', 'msg']
+    });
 
-    var fs = new Ext.FormPanel({
+    var formPanel = Ext.create('Ext.form.Panel', {
+        renderTo: 'form-ct',
         frame: true,
         title:'XML Form',
-        labelAlign: 'right',
-        labelWidth: 85,
-        width:340,
+        width: 340,
+        bodyPadding: 5,
         waitMsgTarget: true,
 
-        // configure how to read the XML Data
-        reader : new Ext.data.XmlReader({
-            record : 'contact',
-            success: '@success'
-        }, [
-            {name: 'first', mapping:'name/first'}, // custom mapping
-            {name: 'last', mapping:'name/last'},
-            'company', 'email', 'state',
-            {name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
-        ]),
+        fieldDefaults: {
+            labelAlign: 'right',
+            labelWidth: 85,
+            msgTarget: 'side'
+        },
 
-        // reusable eror reader class defined at the end of this file
-        errorReader: new Ext.form.XmlErrorReader(),
+        // configure how to read the XML data
+        reader : Ext.create('Ext.data.reader.Xml', {
+            model: 'example.contact',
+            record : 'contact',
+            successProperty: '@success'
+        }),
 
-        items: [
-            new Ext.form.FieldSet({
-                title: 'Contact Information',
-                autoHeight: true,
-                defaultType: 'textfield',
-                items: [{
-                        fieldLabel: 'First Name',
-                        emptyText: 'First Name',
-                        name: 'first',
-                        width:190
-                    }, {
-                        fieldLabel: 'Last Name',
-                        emptyText: 'Last Name',
-                        name: 'last',
-                        width:190
-                    }, {
-                        fieldLabel: 'Company',
-                        name: 'company',
-                        width:190
-                    }, {
-                        fieldLabel: 'Email',
-                        name: 'email',
-                        vtype:'email',
-                        width:190
-                    },
+        // configure how to read the XML errors
+        errorReader: Ext.create('Ext.data.reader.Xml', {
+            model: 'example.fielderror',
+            record : 'field',
+            successProperty: '@success'
+        }),
 
-                    new Ext.form.ComboBox({
-                        fieldLabel: 'State',
-                        hiddenName:'state',
-                        store: new Ext.data.ArrayStore({
-                            fields: ['abbr', 'state'],
-                            data : Ext.exampledata.states // from states.js
-                        }),
-                        valueField:'abbr',
-                        displayField:'state',
-                        typeAhead: true,
-                        mode: 'local',
-                        triggerAction: 'all',
-                        emptyText:'Select a state...',
-                        selectOnFocus:true,
-                        width:190
+        items: [{
+            xtype: 'fieldset',
+            title: 'Contact Information',
+            defaultType: 'textfield',
+            defaults: {
+                width: 280
+            },
+            items: [{
+                    fieldLabel: 'First Name',
+                    emptyText: 'First Name',
+                    name: 'first'
+                }, {
+                    fieldLabel: 'Last Name',
+                    emptyText: 'Last Name',
+                    name: 'last'
+                }, {
+                    fieldLabel: 'Company',
+                    name: 'company'
+                }, {
+                    fieldLabel: 'Email',
+                    name: 'email',
+                    vtype:'email'
+                }, {
+                    xtype: 'combobox',
+                    fieldLabel: 'State',
+                    name: 'state',
+                    store: Ext.create('Ext.data.ArrayStore', {
+                        fields: ['abbr', 'state'],
+                        data : Ext.example.states // from states.js
                     }),
+                    valueField: 'abbr',
+                    displayField: 'state',
+                    typeAhead: true,
+                    queryMode: 'local',
+                    emptyText: 'Select a state...'
+                }, {
+                    xtype: 'datefield',
+                    fieldLabel: 'Date of Birth',
+                    name: 'dob',
+                    allowBlank: false
+                }
+            ]
+        }],
 
-                    new Ext.form.DateField({
-                        fieldLabel: 'Date of Birth',
-                        name: 'dob',
-                        width:190,
-                        allowBlank:false
-                    })
-                ]
-            })
-        ]
-    });
-
-    // simple button add
-    fs.addButton('Load', function(){
-        fs.getForm().load({url:'xml-form.xml', waitMsg:'Loading'});
-    });
-
-    // explicit add
-    var submit = fs.addButton({
-        text: 'Submit',
-        disabled:true,
-        handler: function(){
-            fs.getForm().submit({url:'xml-errors.xml', waitMsg:'Saving Data...', submitEmptyText: false});
-        }
-    });
-
-    fs.render('form-ct');
-
-    fs.on({
-        actioncomplete: function(form, action){
-            if(action.type == 'load'){
-                submit.enable();
+        buttons: [{
+            text: 'Load',
+            handler: function(){
+                formPanel.getForm().load({
+                    url: 'xml-form-data.xml',
+                    waitMsg: 'Loading...'
+                });
+            }
+        }, {
+            text: 'Submit',
+            disabled: true,
+            formBind: true,
+            handler: function(){
+                this.up('form').getForm().submit({
+                    url: 'xml-form-errors.xml',
+                    submitEmptyText: false,
+                    waitMsg: 'Saving Data...'
+                });
             }
-        }
+        }]
     });
 
 });
-
-// A reusable error reader class for XML forms
-Ext.form.XmlErrorReader = function(){
-    Ext.form.XmlErrorReader.superclass.constructor.call(this, {
-            record : 'field',
-            success: '@success'
-        }, [
-            'id', 'msg'
-        ]
-    );
-};
-Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);
\ No newline at end of file