examples/form/hbox-form.js

   1 Ext.require([
   2     'Ext.form.Panel',
   3     'Ext.layout.container.Anchor'
   4 ]);
   5
   6 Ext.onReady(function() {
   7     Ext.create('Ext.form.Panel', {
   8         renderTo: Ext.getBody(),
   9         title: 'Form Panel',
  10         bodyStyle: 'padding:5px 5px 0',
  11         width: 600,
  12         fieldDefaults: {
  13             labelAlign: 'top',
  14             msgTarget: 'side'
  15         },
  16         defaults: {
  17             border: false,
  18             xtype: 'panel',
  19             flex: 1,
  20             layout: 'anchor'
  21         },
  22
  23         layout: 'hbox',
  24         items: [{
  25             items: [{
  26                 xtype:'textfield',
  27                 fieldLabel: 'First Name',
  28                 anchor: '-5',
  29                 name: 'first'
  30             }, {
  31                 xtype:'textfield',
  32                 fieldLabel: 'Company',
  33                 anchor: '-5',
  34                 name: 'company'
  35             }]
  36         }, {
  37             items: [{
  38                 xtype:'textfield',
  39                 fieldLabel: 'Last Name',
  40                 anchor: '100%',
  41                 name: 'last'
  42             },{
  43                 xtype:'textfield',
  44                 fieldLabel: 'Email',
  45                 anchor: '100%',
  46                 name: 'email',
  47                 vtype:'email'
  48             }]
  49         }],
  50         buttons: ['->', {
  51             text: 'Save'
  52         }, {
  53             text: 'Cancel'
  54         }]
  55     });
  56 });
  57