examples/layout/hbox.html

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