Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / layout / hbox.html
1 <html>
2 <head>
3     <title>HBox 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
23         Ext.onReady(function() {
24           
25             var currentName;
26
27             var replace = function(config, name) {
28               var btns = Ext.getCmp('btns');
29               
30               if (name && name != currentName) {
31                   currentName = name;
32                   
33                   btns.remove(0);
34
35                   btns.add(Ext.apply(config, {
36                       layout:'hbox'
37                   }));
38               };
39               
40               btns.doLayout();
41             }
42
43
44             var viewport = new Ext.Viewport({
45                 layout:'border',
46
47                 items: [{
48                     id:'btns',
49                     region:'north',
50                     baseCls:'x-plain',
51                     split:true,
52                     height:50,
53                     minHeight: 40,
54                     maxHeight: 85,
55                     layout:'fit',
56                     margins: '5 5 0 5',
57                     items: {
58                         baseCls: 'x-plain',
59                         html: '<p style="padding:10px;color:#556677;">Select a configuration below:</p>'
60                     }
61                }, {
62                     region:'center',
63                     margins: '0 5 5 5',
64                     layout:'anchor',
65
66                     items:[{
67                         anchor:'100%',
68                         baseCls:'x-plain',
69                         layout:'hbox',
70                         layoutConfig: {
71                             padding: 10
72                         },
73                         defaults:{
74                             margins:'0 5 0 0',
75                             pressed: false,
76                             toggleGroup:'btns',
77                             allowDepress: false
78                         },
79                         items: [{
80                             xtype:'button',
81                             text: 'Spaced',
82                             handler: function(){
83                                 replace({
84                                     layoutConfig: {
85                                         padding:'5',
86                                         align:'top'
87                                     },
88                                     defaults:{margins:'0 5 0 0'},
89                                     items:[{
90                                         xtype:'button',
91                                         text: 'Button 1'
92                                     },{
93                                         xtype:'spacer',
94                                         flex:1
95                                     },{
96                                         xtype:'button',
97                                         text: 'Button 2'
98                                     },{
99                                         xtype:'button',
100                                         text: 'Button 3'
101                                     },{
102                                         xtype:'button',
103                                         text: 'Button 4',
104                                         margins:'0'
105                                     }]
106                                 }, 'spaced');
107                             }
108                         },{
109                             xtype:'button',
110                             text: 'Align: top',
111                             handler: function(){
112                                 replace({
113                                     layoutConfig: {
114                                         padding:'5',
115                                         align:'top'
116                                     },
117                                     defaults:{margins:'0 5 0 0'},
118                                     items:[{
119                                         xtype:'button',
120                                         text: 'Button 1'
121                                     },{
122                                         xtype:'button',
123                                         text: 'Button 2'
124                                     },{
125                                         xtype:'button',
126                                         text: 'Button 3'
127                                     },{
128                                         xtype:'button',
129                                         text: 'Button 4'
130                                     }]
131                                 }, 'align top');
132                             }
133                         },{
134                             xtype:'button',
135                             text: 'Align: middle',
136                             handler: function(){
137                                 replace({
138                                     layoutConfig: {
139                                         padding:'5',
140                                         align:'middle'
141                                     },
142                                     defaults:{margins:'0 5 0 0'},
143                                     items:[{
144                                         xtype:'button',
145                                         text: 'Button 1'
146                                     },{
147                                         xtype:'button',
148                                         text: 'Button 2'
149                                     },{
150                                         xtype:'button',
151                                         text: 'Button 3'
152                                     },{
153                                         xtype:'button',
154                                         text: 'Button 4'
155                                     }]
156                                 }, 'align middle');
157                             }
158                         },{
159                             xtype:'button',
160                             text: 'Align: stretch',
161                             handler: function(){
162                                 replace({
163                                     layoutConfig: {
164                                         padding:'5',
165                                         align:'stretch'
166                                     },
167                                     defaults:{margins:'0 5 0 0'},
168                                     items:[{
169                                         xtype:'button',
170                                         text: 'Button 1'
171                                     },{
172                                         xtype:'button',
173                                         text: 'Button 2'
174                                     },{
175                                         xtype:'button',
176                                         text: 'Button 3'
177                                     },{
178                                         xtype:'button',
179                                         text: 'Button 4'
180                                     }]
181                                 }, 'align stretch');
182                             }
183                         },{
184                             xtype:'button',
185                             text: 'Align: stretchmax',
186                             handler: function(){
187                                 replace({
188                                     layoutConfig: {
189                                         padding:'5',
190                                         align:'stretchmax'
191                                     },
192                                     defaults:{margins:'0 5 0 0'},
193                                     items:[{
194                                         xtype:'button',
195                                         text: 'Button 1'
196                                     },{
197                                         xtype:'button',
198                                         text: 'Button 2'
199                                     },{
200                                         xtype:'button',
201                                         text: 'Button 3'
202                                     },{
203                                         xtype:'button',
204                                         text: 'Button 4'
205                                     }]
206                                 }, 'align stretchmax');
207                             }
208                         }]
209                     },{
210                         anchor:'100%',
211                         baseCls:'x-plain',
212                         layout:'hbox',
213                         layoutConfig: {
214                             padding: '0 10 10'
215                         },
216                         defaults:{
217                             margins:'0 5 0 0',
218                             pressed: false,
219                             toggleGroup:'btns',
220                             allowDepress: false
221                         },
222                         items: [{
223                             xtype:'button',
224                             text: 'Flex: All even / Align: middle',
225                             handler: function(){
226                                 replace({
227                                     layoutConfig: {
228                                         padding:'5',
229                                         align:'middle'
230                                     },
231                                     defaults:{margins:'0 5 0 0'},
232                                     items:[{
233                                         xtype:'button',
234                                         text: 'Button 1',
235                                         flex:1
236                                     },{
237                                         xtype:'button',
238                                         text: 'Button 2',
239                                         flex:1
240                                     },{
241                                         xtype:'button',
242                                         text: 'Button 3',
243                                         flex:1
244                                     },{
245                                         xtype:'button',
246                                         text: 'Button 4',
247                                         flex:1,
248                                         margins:'0'
249                                     }]
250                                 }, 'flex all even');
251                             }
252                         },{
253                             xtype:'button',
254                             text: 'Flex: Ratio / Align: top',
255                             handler: function(){
256                                 replace({
257                                     layoutConfig: {
258                                         padding:'5',
259                                         align:'top'
260                                     },
261                                     defaults:{margins:'0 5 0 0'},
262                                     items:[{
263                                         xtype:'button',
264                                         text: 'Button 1',
265                                         flex:1
266                                     },{
267                                         xtype:'button',
268                                         text: 'Button 2',
269                                         flex:1
270                                     },{
271                                         xtype:'button',
272                                         text: 'Button 3',
273                                         flex:1
274                                     },{
275                                         xtype:'button',
276                                         text: 'Button 4',
277                                         flex:3,
278                                         margins:'0'
279                                     }]
280                                 }, 'flex ratio');
281                             }
282                         },{
283                             xtype:'button',
284                             text: 'Pack: start / Align: middle',
285                             handler: function(){
286                                 replace({
287                                     layoutConfig: {
288                                         padding:'5',
289                                         pack:'start',
290                                         align:'middle'
291                                     },
292                                     defaults:{margins:'0 5 0 0'},
293                                     items:[{
294                                         xtype:'button',
295                                         text: 'Button 1'
296                                     },{
297                                         xtype:'button',
298                                         text: 'Button 2'
299                                     },{
300                                         xtype:'button',
301                                         text: 'Button 3'
302                                     },{
303                                         xtype:'button',
304                                         text: 'Button 4'
305                                     }]
306                                 }, 'pack start');
307                             }
308                         },{
309                             xtype:'button',
310                             text: 'Pack: center / Align: middle',
311                             handler: function(){
312                                 replace({
313                                     layoutConfig: {
314                                         padding:'5',
315                                         pack:'center',
316                                         align:'middle'
317                                     },
318                                     defaults:{margins:'0 5 0 0'},
319                                     items:[{
320                                         xtype:'button',
321                                         text: 'Button 1'
322                                     },{
323                                         xtype:'button',
324                                         text: 'Button 2'
325                                     },{
326                                         xtype:'button',
327                                         text: 'Button 3'
328                                     },{
329                                         xtype:'button',
330                                         text: 'Button 4',
331                                         margins:'0'
332                                     }]
333                                 }, 'pack center');
334                             }
335                         },{
336                             xtype:'button',
337                             text: 'Pack: end / Align: middle',
338                             handler: function(){
339                                 replace({
340                                     layoutConfig: {
341                                         padding:'5',
342                                         pack:'end',
343                                         align:'middle'
344                                     },
345                                     defaults:{margins:'0 5 0 0'},
346                                     items:[{
347                                         xtype:'button',
348                                         text: 'Button 1'
349                                     },{
350                                         xtype:'button',
351                                         text: 'Button 2'
352                                     },{
353                                         xtype:'button',
354                                         text: 'Button 3'
355                                     },{
356                                         xtype:'button',
357                                         text: 'Button 4',
358                                         margins:'0'
359                                     }]
360                                 }, 'pack end');
361                             }
362                         }]
363                     }]
364                 }]
365             });
366         });
367     </script>
368 </head>
369 <body>
370 </body>
371 </html>