examples/form/vbox-form.js

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