examples/layout/vbox.html

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