examples/layout/hbox.html

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