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