examples/form/vbox-form.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.onReady(function() {
   8     var form = new Ext.form.FormPanel({
   9         baseCls: 'x-plain',
  10         labelWidth: 55,
  11         url: 'save-form.php',
  12         layout: {
  13             type: 'vbox',
  14             align: 'stretch'  // Child items are stretched to full width
  15         },
  16         defaults: {
  17             xtype: 'textfield'
  18         },
  19
  20         items: [{
  21             xtype: 'combo',
  22             store: ['test@example.com', 'someone-else@example.com' ],
  23             plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
  24             fieldLabel: 'Send To',
  25             name: 'to'
  26         },{
  27             plugins: [ Ext.ux.FieldLabeler ],
  28             fieldLabel: 'Subject',
  29             name: 'subject'
  30         }, {
  31             xtype: 'textarea',
  32             fieldLabel: 'Message text',
  33             hideLabel: true,
  34             name: 'msg',
  35             flex: 1  // Take up all *remaining* vertical space
  36         }]
  37     });
  38
  39     var w = new Ext.Window({
  40         title: 'Compose message',
  41         collapsible: true,
  42         maximizable: true,
  43         width: 750,
  44         height: 500,
  45         minWidth: 300,
  46         minHeight: 200,
  47         layout: 'fit',
  48         plain: true,
  49         bodyStyle: 'padding:5px;',
  50         buttonAlign: 'center',
  51         items: form,
  52         buttons: [{
  53             text: 'Send'
  54         },{
  55             text: 'Cancel'
  56         }]
  57     });
  58     w.show();
  59 });