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>