src/src/layout/HBox.js

   1 /**
   2  * The HBox (short for horizontal box) layout makes it easy to position items horizontally in a
   3  * {@link Ext.Container Container}. It can size items based on a fixed width or a fraction of the total width
   4  * available.
   5  *
   6  * For example, an email client might have a list of messages pinned to the left, taking say one third of the available
   7  * width, and a message viewing panel in the rest of the screen. We can achieve this with hbox layout's *flex* config:
   8  *
   9  *     @example
  10  *     Ext.create('Ext.Container', {
  11  *         fullscreen: true,
  12  *         layout: 'hbox',
  13  *         items: [
  14  *             {
  15  *                 html: 'message list',
  16  *                 style: 'background-color: #5E99CC;',
  17  *                 flex: 1
  18  *             },
  19  *             {
  20  *                 html: 'message preview',
  21  *                 style: 'background-color: #759E60;',
  22  *                 flex: 2
  23  *             }
  24  *         ]
  25  *     });
  26  *
  27  * This will give us two boxes - one that's one third of the available width, the other being two thirds of the
  28  * available width:
  29  *
  30  * {@img ../guides/layouts/hbox.jpg}
  31  *
  32  * We can also specify fixed widths for child items, or mix fixed widths and flexes. For example, here we have 3 items
  33  * - one on each side with flex: 1, and one in the center with a fixed width of 100px:
  34  *
  35  *     @example
  36  *     Ext.create('Ext.Container', {
  37  *         fullscreen: true,
  38  *         layout: 'hbox',
  39  *         items: [
  40  *             {
  41  *                 html: 'Left item',
  42  *                 style: 'background-color: #759E60;',
  43  *                 flex: 1
  44  *             },
  45  *             {
  46  *                 html: 'Center item',
  47  *                 width: 100
  48  *             },
  49  *             {
  50  *                 html: 'Right item',
  51  *                 style: 'background-color: #5E99CC;',
  52  *                 flex: 1
  53  *             }
  54  *         ]
  55  *     });
  56  *
  57  * Which gives us an effect like this:
  58  *
  59  * {@img ../guides/layouts/hboxfixed.jpg}
  60  *
  61  * For a more detailed overview of Sencha Touch 2 layouts, check out the
  62  * [Layout Guide](../../../core_concepts/layouts.html).
  63  */
  64 Ext.define('Ext.layout.HBox', {
  65     extend: 'Ext.layout.FlexBox',
  66
  67     alias: 'layout.hbox'
  68 });