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 8fe6c0e..31d1342 100644 (file)
--- a/examples/form/vbox-form.js
+++ b/examples/form/vbox-form.js
@@ -1,59 +1,87 @@
-/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.Container.prototype.bufferResize = false;\r
-\r
-Ext.onReady(function() {\r
-    var form = new Ext.form.FormPanel({\r
-        baseCls: 'x-plain',\r
-        labelWidth: 55,\r
-        url: 'save-form.php',\r
-        layout: {\r
-            type: 'vbox',\r
-            align: 'stretch'  // Child items are stretched to full width\r
-        },\r
-        defaults: {\r
-            xtype: 'textfield'\r
-        },\r
-\r
-        items: [{\r
-            plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],\r
-            fieldLabel: 'Send To',\r
-            name: 'to'\r
-        },{\r
-            plugins: [ Ext.ux.FieldLabeler ],\r
-            fieldLabel: 'Subject',\r
-            name: 'subject'\r
-        }, {\r
-            xtype: 'textarea',\r
-            fieldLabel: 'Message text',\r
-            hideLabel: true,\r
-            name: 'msg',\r
-            flex: 1  // Take up all *remaining* vertical space\r
-        }]\r
-    });\r
-\r
-    var window = new Ext.Window({\r
-        title: 'Compose message',\r
-        collapsible: true,\r
-        maximizable: true,\r
-        width: 750,\r
-        height: 500,\r
-        minWidth: 300,\r
-        minHeight: 200,\r
-        layout: 'fit',\r
-        plain: true,\r
-        bodyStyle: 'padding:5px;',\r
-        buttonAlign: 'center',\r
-        items: form,\r
-        buttons: [{\r
-            text: 'Send'\r
-        },{\r
-            text: 'Cancel'\r
-        }]\r
-    });\r
-    window.show();\r
+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 = 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
+        },
+
+        items: [{
+            xtype: 'combo',
+            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'
+        }, {
+            xtype: 'textfield',
+            fieldLabel: 'Subject',
+            name: 'subject'
+        }, {
+            xtype: 'textarea',
+            fieldLabel: 'Message text',
+            hideLabel: true,
+            name: 'msg',
+            style: 'margin:0', // Remove default margin
+            flex: 1  // Take up all *remaining* vertical space
+        }]
+    });
+
+    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',
+        items: form,
+        dockedItems: [{
+            xtype: 'toolbar',
+            dock: 'bottom',
+            ui: 'footer',
+            layout: {
+                pack: 'center'
+            },
+            items: [{
+                minWidth: 80,
+                text: 'Send'
+            },{
+                minWidth: 80,
+                text: 'Cancel'
+            }]
+        }]
+    });
+    win.show();
 });
\ No newline at end of file