Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / form / vbox-form.js

diff --git a/examples/form/vbox-form.js b/examples/form/vbox-form.js
index 1a86b53..31d1342 100644 (file)
--- a/examples/form/vbox-form.js
+++ b/examples/form/vbox-form.js
@@ -1,30 +1,49 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+Ext.require([
+    'Ext.form.*',
+    'Ext.window.Window',
+    'Ext.data.*',
+    'Ext.ux.FieldReplicator'
+]);
+
+
 Ext.onReady(function() {
-    var form = new Ext.form.FormPanel({
-        baseCls: 'x-plain',
-        labelWidth: 55,
+    var form = Ext.create('Ext.form.Panel', {
+        plain: true,
+        border: 0,
+        bodyPadding: 5,
         url: 'save-form.php',
+
+        fieldDefaults: {
+            labelWidth: 55,
+            anchor: '100%'
+        },
+
         layout: {
             type: 'vbox',
             align: 'stretch'  // Child items are stretched to full width
         },
-        defaults: {
-            xtype: 'textfield'
-        },
 
         items: [{
             xtype: 'combo',
-            store: ['test@example.com', 'someone-else@example.com' ],
-            plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
+            store: Ext.create('Ext.data.ArrayStore', {
+                fields: [ 'email' ],
+                data: [
+                    ['test@example.com'],
+                    ['someone@example.com'],
+                    ['someone-else@example.com']
+                ]
+            }),
+            displayField: 'email',
+            plugins: [ Ext.ux.FieldReplicator ],
             fieldLabel: 'Send To',
+            queryMode: 'local',
+            selectOnTab: false,
             name: 'to'
-        },{
-            plugins: [ Ext.ux.FieldLabeler ],
+        }, {
+            xtype: 'textfield',
             fieldLabel: 'Subject',
             name: 'subject'
         }, {
@@ -32,28 +51,37 @@ Ext.onReady(function() {
             fieldLabel: 'Message text',
             hideLabel: true,
             name: 'msg',
+            style: 'margin:0', // Remove default margin
             flex: 1  // Take up all *remaining* vertical space
         }]
     });
 
-    var w = new Ext.Window({
+    var win = Ext.create('Ext.window.Window', {
         title: 'Compose message',
         collapsible: true,
+        animCollapse: true,
         maximizable: true,
         width: 750,
         height: 500,
         minWidth: 300,
         minHeight: 200,
         layout: 'fit',
-        plain: true,
-        bodyStyle: 'padding:5px;',
-        buttonAlign: 'center',
         items: form,
-        buttons: [{
-            text: 'Send'
-        },{
-            text: 'Cancel'
+        dockedItems: [{
+            xtype: 'toolbar',
+            dock: 'bottom',
+            ui: 'footer',
+            layout: {
+                pack: 'center'
+            },
+            items: [{
+                minWidth: 80,
+                text: 'Send'
+            },{
+                minWidth: 80,
+                text: 'Cancel'
+            }]
         }]
     });
-    w.show();
+    win.show();
 });
\ No newline at end of file