examples/form/vbox-form.html

   1 <html>\r
   2 <head>\r
   3     <title>Vbox</title>\r
   4     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>\r
   5 \r
   6     <!-- GC -->\r
   7     <!-- LIBS -->\r
   8     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
   9     <!-- ENDLIBS -->\r
  10 \r
  11     <script type="text/javascript" src="../../ext-all.js"></script>\r
  12     <script type="text/javascript" src="../ux/FieldLabeler.js"></script>\r
  13     <script type="text/javascript" src="../ux/FieldReplicator.js"></script>\r
  14 \r
  15     <script type="text/javascript" src="vbox-form.js"></script>\r
  16     <link rel="stylesheet" type="text/css" href="forms.css"/>\r
  17 \r
  18     <!-- Common Styles for the examples -->\r
  19     <link rel="stylesheet" type="text/css" href="../shared/examples.css"/>\r
  20 </head>\r
  21 <body>\r
  22 <script type="text/javascript" src="../shared/examples.js"></script>\r
  23 <!-- EXAMPLES -->\r
  24 <h1>vbox Layout with Forms</h1>\r
  25 <p>The <code><b>align:'stretch'</b></code> config of the vbox layout manager ensures\r
  26 all child items are 100% of the container width.</p>\r
  27 <p>The <code><b>flex</b></code> config of child items of a vbox layout specifies what share of the vertical\r
  28 space left when unflexed items are accounted for to allocate for that child item.</p>\r
  29 <p>Compare this to <a href="anchoring.html">The anchoring example</a>. That anchors the fields\r
  30 to a hardcoded offset from the edge of the Container. The box layout managers allow much more\r
  31 flexibility in use of available space.</p>\r
  32 <p>The js is not minified so it is readable. See <a href="vbox-form.js">vbox-form.js</a>.</p>\r
  33 <p>This also illustrates the use of plugins to alter the default behaviour of Components. The <b>Send To</b>\r
  34 field clones itself until the final one is left blank to allow multiple mail recipients. The layout\r
  35 manager keeps the vertical space allocated correctly.</p>\r
  36 </body>\r
  37 </html>