Upgrade to ExtJS 4.0.0 - Released 04/26/2011

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

diff --git a/examples/form/hbox-form.js b/examples/form/hbox-form.js
new file mode 100644 (file)
index 0000000..33a733d
--- /dev/null
+++ b/examples/form/hbox-form.js
@@ -0,0 +1,57 @@
+Ext.require([
+    'Ext.form.Panel',
+    'Ext.layout.container.Anchor'
+]);
+
+Ext.onReady(function() {
+    Ext.create('Ext.form.Panel', {
+        renderTo: Ext.getBody(),
+        title: 'Form Panel',
+        bodyStyle: 'padding:5px 5px 0',
+        width: 600,
+        fieldDefaults: {
+            labelAlign: 'top',
+            msgTarget: 'side'
+        },
+        defaults: {
+            border: false,
+            xtype: 'panel',
+            flex: 1,
+            layout: 'anchor'
+        },
+
+        layout: 'hbox',
+        items: [{
+            items: [{
+                xtype:'textfield',
+                fieldLabel: 'First Name',
+                anchor: '-5',
+                name: 'first'
+            }, {
+                xtype:'textfield',
+                fieldLabel: 'Company',
+                anchor: '-5',
+                name: 'company'
+            }]
+        }, {
+            items: [{
+                xtype:'textfield',
+                fieldLabel: 'Last Name',
+                anchor: '100%',
+                name: 'last'
+            },{
+                xtype:'textfield',
+                fieldLabel: 'Email',
+                anchor: '100%',
+                name: 'email',
+                vtype:'email'
+            }]
+        }],
+        buttons: ['->', {
+            text: 'Save'
+        }, {
+            text: 'Cancel'
+        }]
+    });
+});
+