/ext-4.1.0_b3/docs/source/VBox.html
HTML | 137 lines | 127 code | 10 blank | 0 comment | 0 complexity | b903004b6d8f482abb0679f68bd1f929 MD5 | raw file
1<!DOCTYPE html>
2<html>
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
10 </style>
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14 }
15 </script>
16</head>
17<body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-layout-container-VBox'>/**
19</span> * A layout that arranges items vertically down a Container. This layout optionally divides available vertical space
20 * between child items containing a numeric `flex` configuration.
21 *
22 * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.
23 *
24 * @example
25 * Ext.create('Ext.Panel', {
26 * width: 500,
27 * height: 400,
28 * title: "VBoxLayout Panel",
29 * layout: {
30 * type: 'vbox',
31 * align: 'center'
32 * },
33 * renderTo: document.body,
34 * items: [{
35 * xtype: 'panel',
36 * title: 'Inner Panel One',
37 * width: 250,
38 * flex: 2
39 * },
40 * {
41 * xtype: 'panel',
42 * title: 'Inner Panel Two',
43 * width: 250,
44 * flex: 4
45 * },
46 * {
47 * xtype: 'panel',
48 * title: 'Inner Panel Three',
49 * width: '50%',
50 * flex: 4
51 * }]
52 * });
53 */
54Ext.define('Ext.layout.container.VBox', {
55
56 /* Begin Definitions */
57
58 alias: ['layout.vbox'],
59 extend: 'Ext.layout.container.Box',
60 alternateClassName: 'Ext.layout.VBoxLayout',
61
62 /* End Definitions */
63
64<span id='Ext-layout-container-VBox-cfg-align'> /**
65</span> * @cfg {String} align
66 * Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
67 *
68 * - **left** : **Default** child items are aligned horizontally at the **left** side of the container
69 * - **center** : child items are aligned horizontally at the **mid-width** of the container
70 * - **stretch** : child items are stretched horizontally to fill the width of the container
71 * - **stretchmax** : child items are stretched horizontally to the size of the largest item.
72 */
73 align : 'left', // left, center, stretch, strechmax
74
75 type: 'vbox',
76
77 direction: 'vertical',
78
79 horizontal: false,
80
81 names: {
82 // parallel
83 lr: 'tb',
84 left: 'top',
85 leftCap: 'Top',
86 right: 'bottom',
87 position: 'top',
88 width: 'height',
89 widthCap: 'Height',
90 widthIndex: 1,
91 x: 'y',
92
93 // perpendicular
94 center: 'center',
95 top: 'left',// 'before',
96 topPosition: 'left',
97 bottom: 'right',// 'after',
98 height: 'width',
99 heightCap: 'Width',
100 heightIndex: 0,
101 y: 'x'
102 },
103
104 sizePolicy: {
105 flex: {
106 '': {
107 setsWidth: 0,
108 setsHeight: 1
109 },
110 stretch: {
111 setsWidth: 1,
112 setsHeight: 1
113 },
114 stretchmax: {
115 readsWidth: 1,
116 setsWidth: 1,
117 setsHeight: 1
118 }
119 },
120 '': {
121 setsWidth: 0,
122 setsHeight: 0
123 },
124 stretch: {
125 setsWidth: 1,
126 setsHeight: 0
127 },
128 stretchmax: {
129 readsWidth: 1,
130 setsWidth: 1,
131 setsHeight: 0
132 }
133 }
134});
135</pre>
136</body>
137</html>