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