/** * 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: * * ```javascript * @example({ framework: 'extjs' }) * 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 * } * ] * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtContainer, ExtPanel } from '@sencha/ext-react'; * * export default class myExample extends Component { * render() { * return ( * <ExtContainer layout="hbox"> * <ExtPanel title="Inner Panel 1" flex="1"> * This is the inner panel content * </ExtPanel> * <ExtPanel title="Inner Panel 2" flex="1"> * This is the inner panel content * </ExtPanel> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer layout="hbox"> * <ExtPanel title="Inner Panel 1" flex="1"> * This is the inner panel content * </ExtPanel> * <ExtPanel title="Inner Panel 2" flex="1"> * This is the inner panel content * </ExtPanel> * </ExtContainer> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container layout="hbox"> * <ext-panel title="Inner Panel 1" flex="1"> * This is the inner panel content * </ext-panel> * <ext-panel title="Inner Panel 2" flex="1"> * This is the inner panel content * </ext-panel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-panel.component'; * * export default class HBoxComponent {} * ``` * * * 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 }});