text: /**
   * The HBox (short for horizontal box) layout makes it easy to position items horizontally in a
   * {@link Ext.Container Container}. It can size items based on a fixed width or a fraction of the total width
   * available.
   *
   * For example, an email client might have a list of messages pinned to the left, taking say one third of the available
   * width, and a message viewing panel in the rest of the screen. We can achieve this with hbox layout's *flex* config:
   *
   *     @example
   *     Ext.create('Ext.Container', {
   *         fullscreen: true,
   *         layout: 'hbox',
   *         items: [
   *             {
   *                 html: 'message list',
   *                 style: 'background-color: #5E99CC;',
   *                 flex: 1
   *             },
   *             {
   *                 html: 'message preview',
   *                 style: 'background-color: #759E60;',
   *                 flex: 2
   *             }
   *         ]
   *     });
   *
   * This will give us two boxes - one that's one third of the available width, the other being two thirds of the
   * available width.
   *
   * We can also specify fixed widths for child items, or mix fixed widths and flexes. For example, here we have 3 items
   * - one on each side with flex: 1, and one in the center with a fixed width of 100px:
   *
   *     @example
   *     Ext.create('Ext.Container', {
   *         fullscreen: true,
   *         layout: 'hbox',
   *         items: [
   *             {
   *                 html: 'Left item',
   *                 style: 'background-color: #759E60;',
   *                 flex: 1
   *             },
   *             {
   *                 html: 'Center item',
   *                 width: 100
   *             },
   *             {
   *                 html: 'Right item',
   *                 style: 'background-color: #5E99CC;',
   *                 flex: 1
   *             }
   *         ]
   *     });
   */
  Ext.define('Ext.layout.HBox', {
      extend: 'Ext.layout.Box',
  
      alias: 'layout.hbox',
  
      config: {
          vertical: false
      }
  });
  