Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / locale / ContactForm.js
index 690853c..6976304 100644 (file)
@@ -1,12 +1,11 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-Ext.ns('Ext.app');
-
-Ext.app.ContactForm = Ext.extend(Ext.FormPanel, {
+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',
@@ -18,18 +17,17 @@ Ext.app.ContactForm = Ext.extend(Ext.FormPanel, {
     birth: 'Date of Birth',
     save: 'Save',
     cancel: 'Cancel',
-    
     initComponent : function(config) {
         Ext.apply(this, {
-            labelWidth: 100, // label settings here cascade unless overridden
-            url:'save-form.php',
-            frame:true,
+            url: 'save-form.php',
+            frame: true,
             title: this.formTitle,
-            bodyStyle:'padding:5px 5px 0',
+            bodyStyle: 'padding:5px 5px 0',
             width: 370,
-            defaults: {width: 220},
             defaultType: 'textfield',
-    
+            defaults: {
+                width: 330
+            },
             items: [{
                     fieldLabel: this.firstName,
                     name: 'firstname',
@@ -39,57 +37,60 @@ Ext.app.ContactForm = Ext.extend(Ext.FormPanel, {
                     name: 'lastName'
                 },{
                     fieldLabel: this.surnamePrefix,
-                    width: 50,
+                    width: 150,
                     name: 'surnamePrefix'
                 },{
                     fieldLabel: this.company,
                     name: 'company'
-                },  new Ext.form.ComboBox({
+                },  Ext.create('Ext.form.field.ComboBox', {
                     fieldLabel: this.province,
                     hiddenName: 'state',
-                    store: new Ext.data.ArrayStore({
+                    store: Ext.create('Ext.data.ArrayStore', {
                         fields: ['provincie'],
                         data : Ext.exampledata.dutch_provinces // from dutch-provinces.js
                     }),
                     displayField: 'provincie',
                     typeAhead: true,
-                    mode: 'local',
+                    queryMode: 'local',
                     triggerAction: 'all',
-                    emptyText: this.stateEmtyText,
-                    selectOnFocus:true,
-                    width:190
+                    emptyText: this.stateEmptyText,
+                    selectOnFocus:true
                 }), {
                     fieldLabel: this.email,
                     name: 'email',
                     vtype:'email'
-                }, new Ext.form.DateField({
+                }, Ext.create('Ext.form.field.Date', {
                     fieldLabel: this.birth,
                     name: 'birth'
                 })
             ],
-    
+
             buttons: [{
                 text: this.save
             },{
                 text: this.cancel
             }]
         });
-        
-        Ext.app.ContactForm.superclass.initComponent.apply(this, arguments);
+
+        this.callParent(arguments);
     }
 });
 
+Ext.require([
+   'Ext.tip.QuickTipManager'
+]);
+
 Ext.onReady(function(){
-    Ext.QuickTips.init();
+    Ext.tip.QuickTipManager.init();
 
     // turn on validation errors beside the field globally
-    Ext.form.Field.prototype.msgTarget = 'side';
-    
+    Ext.form.field.Base.prototype.msgTarget = 'side';
+
     var bd = Ext.getBody();
-    
+
     bd.createChild({tag: 'h2', html: 'Localized Contact Form'});
-        
+
     // simple form
-    var simple = new Ext.app.ContactForm();
+    var simple = Ext.create('Ext.app.ContactForm', {});
     simple.render(document.body);
-});
\ No newline at end of file
+});