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