Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / locale / ContactForm.js
index 4367b32..6976304 100644 (file)
@@ -1,95 +1,96 @@
-/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.ns('Ext.app');\r
-\r
-Ext.app.ContactForm = Ext.extend(Ext.FormPanel, {\r
-    formTitle: 'Contact Information (English)',\r
-    firstName: 'First Name',\r
-    lastName: 'Surname',\r
-    surnamePrefix: 'Surname Prefix',\r
-    company: 'Company',\r
-    state: 'State',\r
-    stateEmptyText: 'Choose a state...',\r
-    email: 'E-mail',\r
-    birth: 'Date of Birth',\r
-    save: 'Save',\r
-    cancel: 'Cancel',\r
-    \r
-    initComponent : function(config) {\r
-        Ext.apply(this, {\r
-            labelWidth: 100, // label settings here cascade unless overridden\r
-            url:'save-form.php',\r
-            frame:true,\r
-            title: this.formTitle,\r
-            bodyStyle:'padding:5px 5px 0',\r
-            width: 370,\r
-            defaults: {width: 220},\r
-            defaultType: 'textfield',\r
-    \r
-            items: [{\r
-                    fieldLabel: this.firstName,\r
-                    name: 'firstname',\r
-                    allowBlank:false\r
-                },{\r
-                    fieldLabel: this.lastName,\r
-                    name: 'lastName'\r
-                },{\r
-                    fieldLabel: this.surnamePrefix,\r
-                    width: 50,\r
-                    name: 'surnamePrefix'\r
-                },{\r
-                    fieldLabel: this.company,\r
-                    name: 'company'\r
-                },  new Ext.form.ComboBox({\r
-                    fieldLabel: this.province,\r
-                    hiddenName: 'state',\r
-                    store: new Ext.data.ArrayStore({\r
-                        fields: ['provincie'],\r
-                        data : Ext.exampledata.dutch_provinces // from dutch-provinces.js\r
-                    }),\r
-                    displayField: 'provincie',\r
-                    typeAhead: true,\r
-                    mode: 'local',\r
-                    triggerAction: 'all',\r
-                    emptyText: this.stateEmtyText,\r
-                    selectOnFocus:true,\r
-                    width:190\r
-                }), {\r
-                    fieldLabel: this.email,\r
-                    name: 'email',\r
-                    vtype:'email'\r
-                }, new Ext.form.DateField({\r
-                    fieldLabel: this.birth,\r
-                    name: 'birth'\r
-                })\r
-            ],\r
-    \r
-            buttons: [{\r
-                text: this.save\r
-            },{\r
-                text: this.cancel\r
-            }]\r
-        });\r
-        \r
-        Ext.app.ContactForm.superclass.initComponent.apply(this, arguments);\r
-    }\r
-});\r
-\r
-Ext.onReady(function(){\r
-    Ext.QuickTips.init();\r
-\r
-    // turn on validation errors beside the field globally\r
-    Ext.form.Field.prototype.msgTarget = 'side';\r
-    \r
-    var bd = Ext.getBody();\r
-    \r
-    bd.createChild({tag: 'h2', html: 'Localized Contact Form'});\r
-        \r
-    // simple form\r
-    var simple = new Ext.app.ContactForm();\r
-    simple.render(document.body);\r
-});
\ No newline at end of file
+Ext.define('Ext.app.ContactForm', {
+    extend: 'Ext.form.Panel',
+    requires: [
+     'Ext.data.ArrayStore',
+     'Ext.data.reader.Array',
+     'Ext.form.field.ComboBox',
+     'Ext.form.field.Date'
+    ],
+    formTitle: 'Contact Information (English)',
+    firstName: 'First Name',
+    lastName: 'Surname',
+    surnamePrefix: 'Surname Prefix',
+    company: 'Company',
+    state: 'State',
+    stateEmptyText: 'Choose a state...',
+    email: 'E-mail',
+    birth: 'Date of Birth',
+    save: 'Save',
+    cancel: 'Cancel',
+    initComponent : function(config) {
+        Ext.apply(this, {
+            url: 'save-form.php',
+            frame: true,
+            title: this.formTitle,
+            bodyStyle: 'padding:5px 5px 0',
+            width: 370,
+            defaultType: 'textfield',
+            defaults: {
+                width: 330
+            },
+            items: [{
+                    fieldLabel: this.firstName,
+                    name: 'firstname',
+                    allowBlank:false
+                },{
+                    fieldLabel: this.lastName,
+                    name: 'lastName'
+                },{
+                    fieldLabel: this.surnamePrefix,
+                    width: 150,
+                    name: 'surnamePrefix'
+                },{
+                    fieldLabel: this.company,
+                    name: 'company'
+                },  Ext.create('Ext.form.field.ComboBox', {
+                    fieldLabel: this.province,
+                    hiddenName: 'state',
+                    store: Ext.create('Ext.data.ArrayStore', {
+                        fields: ['provincie'],
+                        data : Ext.exampledata.dutch_provinces // from dutch-provinces.js
+                    }),
+                    displayField: 'provincie',
+                    typeAhead: true,
+                    queryMode: 'local',
+                    triggerAction: 'all',
+                    emptyText: this.stateEmptyText,
+                    selectOnFocus:true
+                }), {
+                    fieldLabel: this.email,
+                    name: 'email',
+                    vtype:'email'
+                }, Ext.create('Ext.form.field.Date', {
+                    fieldLabel: this.birth,
+                    name: 'birth'
+                })
+            ],
+
+            buttons: [{
+                text: this.save
+            },{
+                text: this.cancel
+            }]
+        });
+
+        this.callParent(arguments);
+    }
+});
+
+Ext.require([
+   'Ext.tip.QuickTipManager'
+]);
+
+Ext.onReady(function(){
+    Ext.tip.QuickTipManager.init();
+
+    // turn on validation errors beside the field globally
+    Ext.form.field.Base.prototype.msgTarget = 'side';
+
+    var bd = Ext.getBody();
+
+    bd.createChild({tag: 'h2', html: 'Localized Contact Form'});
+
+    // simple form
+    var simple = Ext.create('Ext.app.ContactForm', {});
+    simple.render(document.body);
+});