Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / examples / layout / vbox.html
1 <html>
2 <head>
3     <title>VBox Layout</title>
4     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
5     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
6     <script type="text/javascript" src="../../bootstrap.js"></script>
7
8     <style type="text/css">
9         html, body {
10             font: normal 12px verdana;
11             margin: 0;
12             padding: 0;
13             border: 0 none;
14         }
15     </style>
16     <script type="text/javascript">
17         Ext.onReady(function() {
18             var currentName;
19             var replace = function(config, name) {
20                 var btns = Ext.getCmp('btns');
21                 if (name && name != currentName) {
22                     currentName = name;
23                     btns.remove(0);
24                     btns.add(Ext.apply(config));
25                 }
26             };
27
28             var viewport = Ext.create('Ext.Viewport', {
29                 layout:'border',
30
31                 items: [{
32                     id:'btns',
33                     region:'west',
34                     baseCls:'x-plain',
35                     split:true,
36                     width:150,
37                     minWidth: 100,
38                     maxWidth: 250,
39                     layout:'fit',
40                     margins: '5 0 5 5',
41                     items: {
42                         baseCls: 'x-plain',
43                         html: '<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right &raquo;</p>'
44                     }
45                }, {
46                     region:'center',
47                     margins: '5 5 5 0',
48                     layout: 'anchor',
49                     items:[{
50                         anchor: '100%',
51                         baseCls:'x-plain',
52                         layout: {
53                             type:'hbox',
54                             padding: 10
55                         },
56                         defaults:{
57                             margins:'0 5 0 0',
58                             pressed: false,
59                             toggleGroup:'btns',
60                             allowDepress: false
61                         },
62                         items: [{
63                             xtype:'button',
64                             text: 'Spaced / Align: left',
65                             handler: function(){
66                                 replace({
67                                     layout: {
68                                         type:'vbox',
69                                         padding:'5',
70                                         align:'left'
71                                     },
72                                     defaults:{margins:'0 0 5 0'},
73                                     items:[{
74                                         xtype:'button',
75                                         text: 'Button 1'
76                                     },{
77                                         xtype:'tbspacer',
78                                         flex:1
79                                     },{
80                                         xtype:'button',
81                                         text: 'Button 2'
82                                     },{
83                                         xtype:'button',
84                                         text: 'Button 3'
85                                     },{
86                                         xtype:'button',
87                                         text: 'Button 4',
88                                         margins:'0'
89                                     }]
90                                 }, 'spaced');
91                             }
92                         },{
93                             xtype:'button',
94                             text: 'Multi-Spaced / Align: left',
95                             handler: function(){
96                                 replace({
97                                     layout: {
98                                         type:'vbox',
99                                         padding:'5',
100                                         align:'left'
101                                     },
102                                     defaults:{margins:'0 0 5 0'},
103                                     items:[{
104                                         xtype:'button',
105                                         text: 'Button 1'
106                                     },{
107                                         xtype:'tbspacer',
108                                         flex:1
109                                     },{
110                                         xtype:'button',
111                                         text: 'Button 2'
112                                     },{
113                                         xtype:'tbspacer',
114                                         flex:1
115                                     },{
116                                         xtype:'button',
117                                         text: 'Button 3'
118                                     },{
119                                         xtype:'tbspacer',
120                                         flex:1
121                                     },{
122                                         xtype:'button',
123                                         text: 'Button 4',
124                                         margins:'0'
125                                     }]
126                                 }, 'multi spaced - align left');
127                             }
128                         },{
129                             xtype:'button',
130                             text: 'Align: left',
131                             handler: function(){
132                                 replace({
133                                     layout: {
134                                         type:'vbox',
135                                         padding:'5',
136                                         align:'left'
137                                     },
138                                     defaults:{margins:'0 0 5 0'},
139                                     items:[{
140                                         xtype:'button',
141                                         text: 'Button 1'
142                                     },{
143                                         xtype:'button',
144                                         text: 'Button 2'
145                                     },{
146                                         xtype:'button',
147                                         text: 'Button 3'
148                                     },{
149                                         xtype:'button',
150                                         text: 'Button 4'
151                                     }]
152                                 }, 'align left');
153                             }
154                         },{
155                             xtype:'button',
156                             text: 'Align: center',
157                             handler: function(){
158                                 replace({
159                                     layout: {
160                                         type:'vbox',
161                                         padding:'5',
162                                         align:'center'
163                                     },
164                                     defaults:{margins:'0 0 5 0'},
165                                     items:[{
166                                         xtype:'button',
167                                         text: 'Button 1'
168                                     },{
169                                         xtype:'button',
170                                         text: 'Button 2'
171                                     },{
172                                         xtype:'button',
173                                         text: 'Button 3'
174                                     },{
175                                         xtype:'button',
176                                         text: 'Button 4'
177                                     }]
178                                 }, 'align center');
179                             }
180                         },{
181                             xtype:'button',
182                             text: 'Align: stretch',
183                             handler: function(){
184                                 replace({
185                                     layout: {
186                                         type:'vbox',
187                                         padding:'5',
188                                         align:'stretch'
189                                     },
190                                     defaults:{margins:'0 0 5 0'},
191                                     items:[{
192                                         xtype:'button',
193                                         text: 'Button 1'
194                                     },{
195                                         xtype:'button',
196                                         text: 'Button 2'
197                                     },{
198                                         xtype:'button',
199                                         text: 'Button 3'
200                                     },{
201                                         xtype:'button',
202                                         text: 'Button 4'
203                                     }]
204                                 }, 'align stretch');
205                             }
206                         },{
207                             xtype:'button',
208                             text: 'Align: stretchmax',
209                             handler: function(){
210                                 replace({
211                                     layout: {
212                                         type:'vbox',
213                                         padding:'5',
214                                         align:'stretchmax'
215                                     },
216                                     defaults:{margins:'0 0 5 0'},
217                                     items:[{
218                                         xtype:'button',
219                                         text: 'Jamie'
220                                     },{
221                                         xtype:'button',
222                                         text: 'Aaron'
223                                     },{
224                                         xtype:'button',
225                                         text: 'Tommy'
226                                     },{
227                                         xtype:'button',
228                                         text: 'Ed '
229                                     }]
230                                 }, 'align stretchmax');
231                             }
232                         }]
233                     },{
234                         anchor: '100%',
235                         baseCls:'x-plain',
236                         layout: {
237                             type:'hbox',
238                             padding: '0 10 10'
239                         },
240                         defaults:{
241                             margins:'0 5 0 0',
242                             pressed: false,
243                             toggleGroup:'btns',
244                             allowDepress: false
245                         },
246                         items: [{
247                             xtype:'button',
248                             text: 'Flex: Even / Align: center',
249                             handler: function(){
250                                 replace({
251                                     layout: {
252                                         type:'vbox',
253                                         padding:'5',
254                                         align:'center'
255                                     },
256                                     defaults:{margins:'0 0 5 0'},
257                                     items:[{
258                                         xtype:'button',
259                                         text: 'Button 1',
260                                         flex:1
261                                     },{
262                                         xtype:'button',
263                                         text: 'Button 2',
264                                         flex:1
265                                     },{
266                                         xtype:'button',
267                                         text: 'Button 3',
268                                         flex:1
269                                     },{
270                                         xtype:'button',
271                                         text: 'Button 4',
272                                         flex:1,
273                                         margins:'0'
274                                     }]
275                                 }, 'align flex even');
276                             }
277                         },{
278                             xtype:'button',
279                             text: 'Flex: Ratio / Align: center',
280                             handler: function(){
281                                 replace({
282                                     layout: {
283                                         type:'vbox',
284                                         padding:'5',
285                                         align:'center'
286                                     },
287                                     defaults:{margins:'0 0 5 0'},
288                                     items:[{
289                                         xtype:'button',
290                                         text: 'Button 1',
291                                         flex:1
292                                     },{
293                                         xtype:'button',
294                                         text: 'Button 2',
295                                         flex:1
296                                     },{
297                                         xtype:'button',
298                                         text: 'Button 3',
299                                         flex:1
300                                     },{
301                                         xtype:'button',
302                                         text: 'Button 4',
303                                         flex:3,
304                                         margins:'0'
305                                     }]
306                                 }, 'align flex ratio');
307                             }
308                         },{
309                             xtype:'button',
310                             text: 'Flex + Stretch',
311                             handler: function(){
312                                 replace({
313                                     layout: {
314                                         type:'vbox',
315                                         padding:'5',
316                                         align:'stretch'
317                                     },
318                                     defaults:{margins:'0 0 5 0'},
319                                     items:[{
320                                         xtype:'button',
321                                         text: 'Button 1',
322                                         flex:1
323                                     },{
324                                         xtype:'button',
325                                         text: 'Button 2',
326                                         flex:1
327                                     },{
328                                         xtype:'button',
329                                         text: 'Button 3',
330                                         flex:1
331                                     },{
332                                         xtype:'button',
333                                         text: 'Button 4',
334                                         flex:3,
335                                         margins:'0'
336                                     }]
337                                 }, 'align flex + stretch');
338                             }
339                         },{
340                             xtype:'button',
341                             text: 'Pack: start / Align: center',
342                             handler: function(){
343                                 replace({
344                                     layout: {
345                                         type:'vbox',
346                                         padding:'5',
347                                         pack:'start',
348                                         align:'center'
349                                     },
350                                     defaults:{margins:'0 0 5 0'},
351                                     items:[{
352                                         xtype:'button',
353                                         text: 'Button 1'
354                                     },{
355                                         xtype:'button',
356                                         text: 'Button 2'
357                                     },{
358                                         xtype:'button',
359                                         text: 'Button 3'
360                                     },{
361                                         xtype:'button',
362                                         text: 'Button 4'
363                                     }]
364                                 }, 'align pack start + align center');
365                             }
366                         },{
367                             xtype:'button',
368                             text: 'Pack: center / Align: center',
369                             handler: function(){
370                                 replace({
371                                     layout: {
372                                         type:'vbox',
373                                         padding:'5',
374                                         pack:'center',
375                                         align:'center'
376                                     },
377                                     defaults:{margins:'0 0 5 0'},
378                                     items:[{
379                                         xtype:'button',
380                                         text: 'Button 1'
381                                     },{
382                                         xtype:'button',
383                                         text: 'Button 2'
384                                     },{
385                                         xtype:'button',
386                                         text: 'Button 3'
387                                     },{
388                                         xtype:'button',
389                                         text: 'Button 4',
390                                         margins:'0'
391                                     }]
392                                 }, 'align pack center + align center');
393                             }
394                         },{
395                             xtype:'button',
396                             text: 'Pack: end / Align: center',
397                             handler: function(){
398                                 replace({
399                                     layout: {
400                                         type:'vbox',
401                                         padding:'5',
402                                         pack:'end',
403                                         align:'center'
404                                     },
405                                     defaults:{margins:'0 0 5 0'},
406                                     items:[{
407                                         xtype:'button',
408                                         text: 'Button 1'
409                                     },{
410                                         xtype:'button',
411                                         text: 'Button 2'
412                                     },{
413                                         xtype:'button',
414                                         text: 'Button 3'
415                                     },{
416                                         xtype:'button',
417                                         text: 'Button 4',
418                                         margins:'0'
419                                     }]
420                                 }, 'align pack end + align center');
421                             }
422                         }]
423                     }]
424                 }]
425             });
426         });
427     </script>
428 </head>
429 <body>
430 </body>
431 </html>