examples/form/vbox-form.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.Container.prototype.bufferResize = false;\r
   8 \r
   9 Ext.onReady(function() {\r
  10     var form = new Ext.form.FormPanel({\r
  11         baseCls: 'x-plain',\r
  12         labelWidth: 55,\r
  13         url: 'save-form.php',\r
  14         layout: {\r
  15             type: 'vbox',\r
  16             align: 'stretch'  // Child items are stretched to full width\r
  17         },\r
  18         defaults: {\r
  19             xtype: 'textfield'\r
  20         },\r
  21 \r
  22         items: [{\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 window = 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     window.show();\r
  59 });