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>