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