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