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