docs/source/BoxLayout.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.layout.BoxLayout"></div>/**\r
  15  * @class Ext.layout.BoxLayout\r
  16  * @extends Ext.layout.ContainerLayout\r
  17  * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>\r
  18  */\r
  19 Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {\r
  20     <div id="cfg-Ext.layout.BoxLayout-defaultMargins"></div>/**\r
  21      * @cfg {Object} defaultMargins\r
  22      * <p>If the individual contained items do not have a <tt>margins</tt>\r
  23      * property specified, the default margins from this property will be\r
  24      * applied to each item.</p>\r
  25      * <br><p>This property may be specified as an object containing margins\r
  26      * to apply in the format:</p><pre><code>\r
  27 {\r
  28     top: (top margin),\r
  29     right: (right margin),\r
  30     bottom: (bottom margin),\r
  31     left: (left margin)\r
  32 }</code></pre>\r
  33      * <p>This property may also be specified as a string containing\r
  34      * space-separated, numeric margin values. The order of the sides associated\r
  35      * with each value matches the way CSS processes margin values:</p>\r
  36      * <div class="mdetail-params"><ul>\r
  37      * <li>If there is only one value, it applies to all sides.</li>\r
  38      * <li>If there are two values, the top and bottom borders are set to the\r
  39      * first value and the right and left are set to the second.</li>\r
  40      * <li>If there are three values, the top is set to the first value, the left\r
  41      * and right are set to the second, and the bottom is set to the third.</li>\r
  42      * <li>If there are four values, they apply to the top, right, bottom, and\r
  43      * left, respectively.</li>\r
  44      * </ul></div>\r
  45      * <p>Defaults to:</p><pre><code>\r
  46      * {top:0, right:0, bottom:0, left:0}\r
  47      * </code></pre>\r
  48      */\r
  49     defaultMargins : {left:0,top:0,right:0,bottom:0},\r
  50     <div id="cfg-Ext.layout.BoxLayout-padding"></div>/**\r
  51      * @cfg {String} padding\r
  52      * <p>Sets the padding to be applied to all child items managed by this layout.</p> \r
  53      * <p>This property must be specified as a string containing\r
  54      * space-separated, numeric padding values. The order of the sides associated\r
  55      * with each value matches the way CSS processes padding values:</p>\r
  56      * <div class="mdetail-params"><ul>\r
  57      * <li>If there is only one value, it applies to all sides.</li>\r
  58      * <li>If there are two values, the top and bottom borders are set to the\r
  59      * first value and the right and left are set to the second.</li>\r
  60      * <li>If there are three values, the top is set to the first value, the left\r
  61      * and right are set to the second, and the bottom is set to the third.</li>\r
  62      * <li>If there are four values, they apply to the top, right, bottom, and\r
  63      * left, respectively.</li>\r
  64      * </ul></div>\r
  65      * <p>Defaults to: <code>"0"</code></p>\r
  66      */\r
  67     padding : '0',\r
  68     // documented in subclasses\r
  69     pack : 'start',\r
  70 \r
  71     // private\r
  72     monitorResize : true,\r
  73     scrollOffset : 0,\r
  74     extraCls : 'x-box-item',\r
  75     ctCls : 'x-box-layout-ct',\r
  76     innerCls : 'x-box-inner',\r
  77     \r
  78     constructor : function(config){\r
  79         Ext.layout.BoxLayout.superclass.constructor.call(this, config);\r
  80         if(Ext.isString(this.defaultMargins)){\r
  81             this.defaultMargins = this.parseMargins(this.defaultMargins);\r
  82         }\r
  83     },\r
  84 \r
  85     // private\r
  86     isValidParent : function(c, target){\r
  87         return c.getEl().dom.parentNode == this.innerCt.dom;\r
  88     },\r
  89 \r
  90     // private\r
  91     onLayout : function(ct, target){\r
  92         var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm;\r
  93 \r
  94         if(!this.innerCt){\r
  95             target.addClass(this.ctCls);\r
  96 \r
  97             // the innerCt prevents wrapping and shuffling while\r
  98             // the container is resizing\r
  99             this.innerCt = target.createChild({cls:this.innerCls});\r
 100             this.padding = this.parseMargins(this.padding); \r
 101         }\r
 102         this.renderAll(ct, this.innerCt);\r
 103     },\r
 104 \r
 105     // private\r
 106     renderItem : function(c){\r
 107         if(Ext.isString(c.margins)){\r
 108             c.margins = this.parseMargins(c.margins);\r
 109         }else if(!c.margins){\r
 110             c.margins = this.defaultMargins;\r
 111         }\r
 112         Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);\r
 113     },\r
 114 \r
 115     getTargetSize : function(target){
 116         return (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getStyleSize() : target.getViewSize();\r
 117     },\r
 118     \r
 119     getItems: function(ct){\r
 120         var items = [];\r
 121         ct.items.each(function(c){\r
 122             if(c.isVisible()){\r
 123                 items.push(c);\r
 124             }\r
 125         });\r
 126         return items;\r
 127     }\r
 128 \r
 129     <div id="prop-Ext.layout.BoxLayout-activeItem"></div>/**\r
 130      * @property activeItem\r
 131      * @hide\r
 132      */\r
 133 });\r
 134 \r
 135 <div id="cls-Ext.layout.VBoxLayout"></div>/**\r
 136  * @class Ext.layout.VBoxLayout\r
 137  * @extends Ext.layout.BoxLayout\r
 138  * <p>A layout that arranges items vertically down a Container. This layout optionally divides available vertical\r
 139  * space between child items containing a numeric <code>flex</code> configuration.</p>\r
 140  * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.\r
 141  */\r
 142 Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {\r
 143     <div id="cfg-Ext.layout.VBoxLayout-align"></div>/**\r
 144      * @cfg {String} align\r
 145      * Controls how the child items of the container are aligned. Acceptable configuration values for this\r
 146      * property are:\r
 147      * <div class="mdetail-params"><ul>\r
 148      * <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally\r
 149      * at the <b>left</b> side of the container</div></li>\r
 150      * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the\r
 151      * <b>mid-width</b> of the container</div></li>\r
 152      * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill\r
 153      * the width of the container</div></li>\r
 154      * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to\r
 155      * the size of the largest item.</div></li>\r
 156      * </ul></div>\r
 157      */\r
 158     align : 'left', // left, center, stretch, strechmax\r
 159     <div id="cfg-Ext.layout.VBoxLayout-pack"></div>/**\r
 160      * @cfg {String} pack\r
 161      * Controls how the child items of the container are packed together. Acceptable configuration values\r
 162      * for this property are:\r
 163      * <div class="mdetail-params"><ul>\r
 164      * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at\r
 165      * <b>top</b> side of container</div></li>\r
 166      * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at\r
 167      * <b>mid-height</b> of container</div></li>\r
 168      * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>bottom</b>\r
 169      * side of container</div></li>\r
 170      * </ul></div>\r
 171      */\r
 172     <div id="cfg-Ext.layout.VBoxLayout-flex"></div>/**\r
 173      * @cfg {Number} flex\r
 174      * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed\r
 175      * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>vertically</b>\r
 176      * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with\r
 177      * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or\r
 178      * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).\r
 179      */\r
 180 \r
 181     // private\r
 182     onLayout : function(ct, target){\r
 183         Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target);\r
 184                     \r
 185         \r
 186         var cs = this.getItems(ct), cm, ch, margin,\r
 187             size = this.getTargetSize(target),\r
 188             w = size.width - target.getPadding('lr'),\r
 189             h = size.height - target.getPadding('tb') - this.scrollOffset,\r
 190             l = this.padding.left, t = this.padding.top,\r
 191             isStart = this.pack == 'start',\r
 192             isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,\r
 193             stretchWidth = w - (this.padding.left + this.padding.right),\r
 194             extraHeight = 0,\r
 195             maxWidth = 0,\r
 196             totalFlex = 0,\r
 197             flexHeight = 0,\r
 198             usedHeight = 0;\r
 199             \r
 200         Ext.each(cs, function(c){\r
 201             cm = c.margins;\r
 202             totalFlex += c.flex || 0;\r
 203             ch = c.getHeight();\r
 204             margin = cm.top + cm.bottom;\r
 205             extraHeight += ch + margin;\r
 206             flexHeight += margin + (c.flex ? 0 : ch);\r
 207             maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right);\r
 208         });\r
 209         extraHeight = h - extraHeight - this.padding.top - this.padding.bottom;\r
 210         \r
 211         var innerCtWidth = maxWidth + this.padding.left + this.padding.right;\r
 212         switch(this.align){\r
 213             case 'stretch':\r
 214                 this.innerCt.setSize(w, h);\r
 215                 break;\r
 216             case 'stretchmax':\r
 217             case 'left':\r
 218                 this.innerCt.setSize(innerCtWidth, h);\r
 219                 break;\r
 220             case 'center':\r
 221                 this.innerCt.setSize(w = Math.max(w, innerCtWidth), h);\r
 222                 break;\r
 223         }\r
 224 \r
 225         var availHeight = Math.max(0, h - this.padding.top - this.padding.bottom - flexHeight),\r
 226             leftOver = availHeight,\r
 227             heights = [],\r
 228             restore = [],\r
 229             idx = 0,\r
 230             availableWidth = Math.max(0, w - this.padding.left - this.padding.right);\r
 231             \r
 232 \r
 233         Ext.each(cs, function(c){\r
 234             if(isStart && c.flex){\r
 235                 ch = Math.floor(availHeight * (c.flex / totalFlex));\r
 236                 leftOver -= ch;\r
 237                 heights.push(ch);\r
 238             }\r
 239         }); \r
 240         \r
 241         if(this.pack == 'center'){\r
 242             t += extraHeight ? extraHeight / 2 : 0;\r
 243         }else if(this.pack == 'end'){\r
 244             t += extraHeight;\r
 245         }\r
 246         Ext.each(cs, function(c){\r
 247             cm = c.margins;\r
 248             t += cm.top;\r
 249             c.setPosition(l + cm.left, t);\r
 250             if(isStart && c.flex){\r
 251                 ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0));\r
 252                 if(isRestore){\r
 253                     restore.push(c.getWidth());\r
 254                 }\r
 255                 c.setSize(availableWidth, ch);\r
 256             }else{\r
 257                 ch = c.getHeight();\r
 258             }\r
 259             t += ch + cm.bottom;\r
 260         });\r
 261         \r
 262         idx = 0;\r
 263         Ext.each(cs, function(c){\r
 264             cm = c.margins;\r
 265             if(this.align == 'stretch'){\r
 266                 c.setWidth((stretchWidth - (cm.left + cm.right)).constrain(\r
 267                     c.minWidth || 0, c.maxWidth || 1000000));\r
 268             }else if(this.align == 'stretchmax'){\r
 269                 c.setWidth((maxWidth - (cm.left + cm.right)).constrain(\r
 270                     c.minWidth || 0, c.maxWidth || 1000000));\r
 271             }else{\r
 272                 if(this.align == 'center'){\r
 273                     var diff = availableWidth - (c.getWidth() + cm.left + cm.right);\r
 274                     if(diff > 0){\r
 275                         c.setPosition(l + cm.left + (diff/2), c.y);\r
 276                     }\r
 277                 }\r
 278                 if(isStart && c.flex){\r
 279                     c.setWidth(restore[idx++]);\r
 280                 }\r
 281             }\r
 282         }, this);\r
 283     }\r
 284     <div id="prop-Ext.layout.VBoxLayout-activeItem"></div>/**\r
 285      * @property activeItem\r
 286      * @hide\r
 287      */\r
 288 });\r
 289 \r
 290 Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;\r
 291 \r
 292 <div id="cls-Ext.layout.HBoxLayout"></div>/**\r
 293  * @class Ext.layout.HBoxLayout\r
 294  * @extends Ext.layout.BoxLayout\r
 295  * <p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal\r
 296  * space between child items containing a numeric <code>flex</code> configuration.</p>\r
 297  * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.\r
 298  */\r
 299 Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {\r
 300     <div id="cfg-Ext.layout.HBoxLayout-align"></div>/**\r
 301      * @cfg {String} align\r
 302      * Controls how the child items of the container are aligned. Acceptable configuration values for this\r
 303      * property are:\r
 304      * <div class="mdetail-params"><ul>\r
 305      * <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically\r
 306      * at the <b>left</b> side of the container</div></li>\r
 307      * <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically at the\r
 308      * <b>mid-height</b> of the container</div></li>\r
 309      * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill\r
 310      * the height of the container</div></li>\r
 311      * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to\r
 312      * the size of the largest item.</div></li>\r
 313      */\r
 314     align : 'top', // top, middle, stretch, strechmax\r
 315     <div id="cfg-Ext.layout.HBoxLayout-pack"></div>/**\r
 316      * @cfg {String} pack\r
 317      * Controls how the child items of the container are packed together. Acceptable configuration values\r
 318      * for this property are:\r
 319      * <div class="mdetail-params"><ul>\r
 320      * <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at\r
 321      * <b>left</b> side of container</div></li>\r
 322      * <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at\r
 323      * <b>mid-width</b> of container</div></li>\r
 324      * <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b>\r
 325      * side of container</div></li>\r
 326      * </ul></div>\r
 327      */\r
 328     <div id="cfg-Ext.layout.HBoxLayout-flex"></div>/**\r
 329      * @cfg {Number} flex\r
 330      * This configuation option is to be applied to <b>child <tt>items</tt></b> of the container managed\r
 331      * by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>\r
 332      * according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with\r
 333      * a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or\r
 334      * <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).\r
 335      */\r
 336 \r
 337     // private\r
 338     onLayout : function(ct, target){\r
 339         Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target);\r
 340         \r
 341         var cs = this.getItems(ct), cm, cw, margin,\r
 342             size = this.getTargetSize(target),\r
 343             w = size.width - target.getPadding('lr') - this.scrollOffset,\r
 344             h = size.height - target.getPadding('tb'),\r
 345             l = this.padding.left, t = this.padding.top,\r
 346             isStart = this.pack == 'start',\r
 347             isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,\r
 348             stretchHeight = h - (this.padding.top + this.padding.bottom),\r
 349             extraWidth = 0,\r
 350             maxHeight = 0,\r
 351             totalFlex = 0,\r
 352             flexWidth = 0,\r
 353             usedWidth = 0;\r
 354         \r
 355         Ext.each(cs, function(c){\r
 356             cm = c.margins;\r
 357             totalFlex += c.flex || 0;\r
 358             cw = c.getWidth();\r
 359             margin = cm.left + cm.right;\r
 360             extraWidth += cw + margin;\r
 361             flexWidth += margin + (c.flex ? 0 : cw);\r
 362             maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom);\r
 363         });\r
 364         extraWidth = w - extraWidth - this.padding.left - this.padding.right;\r
 365         \r
 366         var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom;\r
 367         switch(this.align){\r
 368             case 'stretch':\r
 369                 this.innerCt.setSize(w, h);\r
 370                 break;\r
 371             case 'stretchmax':\r
 372             case 'top':\r
 373                 this.innerCt.setSize(w, innerCtHeight);\r
 374                 break;\r
 375             case 'middle':\r
 376                 this.innerCt.setSize(w, h = Math.max(h, innerCtHeight));\r
 377                 break;\r
 378         }\r
 379         \r
 380 \r
 381         var availWidth = Math.max(0, w - this.padding.left - this.padding.right - flexWidth),\r
 382             leftOver = availWidth,\r
 383             widths = [],\r
 384             restore = [],\r
 385             idx = 0,\r
 386             availableHeight = Math.max(0, h - this.padding.top - this.padding.bottom);\r
 387             \r
 388 \r
 389         Ext.each(cs, function(c){\r
 390             if(isStart && c.flex){\r
 391                 cw = Math.floor(availWidth * (c.flex / totalFlex));\r
 392                 leftOver -= cw;\r
 393                 widths.push(cw);\r
 394             }\r
 395         }); \r
 396         \r
 397         if(this.pack == 'center'){\r
 398             l += extraWidth ? extraWidth / 2 : 0;\r
 399         }else if(this.pack == 'end'){\r
 400             l += extraWidth;\r
 401         }\r
 402         Ext.each(cs, function(c){\r
 403             cm = c.margins;\r
 404             l += cm.left;\r
 405             c.setPosition(l, t + cm.top);\r
 406             if(isStart && c.flex){\r
 407                 cw = Math.max(0, widths[idx++] + (leftOver-- > 0 ? 1 : 0));\r
 408                 if(isRestore){\r
 409                     restore.push(c.getHeight());\r
 410                 }\r
 411                 c.setSize(cw, availableHeight);\r
 412             }else{\r
 413                 cw = c.getWidth();\r
 414             }\r
 415             l += cw + cm.right;\r
 416         });\r
 417         \r
 418         idx = 0;\r
 419         Ext.each(cs, function(c){\r
 420             var cm = c.margins;\r
 421             if(this.align == 'stretch'){\r
 422                 c.setHeight((stretchHeight - (cm.top + cm.bottom)).constrain(\r
 423                     c.minHeight || 0, c.maxHeight || 1000000));\r
 424             }else if(this.align == 'stretchmax'){\r
 425                 c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain(\r
 426                     c.minHeight || 0, c.maxHeight || 1000000));\r
 427             }else{\r
 428                 if(this.align == 'middle'){\r
 429                     var diff = availableHeight - (c.getHeight() + cm.top + cm.bottom);\r
 430                     if(diff > 0){\r
 431                         c.setPosition(c.x, t + cm.top + (diff/2));\r
 432                     }\r
 433                 }\r
 434                 if(isStart && c.flex){\r
 435                     c.setHeight(restore[idx++]);\r
 436                 }\r
 437             }\r
 438         }, this);\r
 439     }\r
 440 \r
 441     <div id="prop-Ext.layout.HBoxLayout-activeItem"></div>/**\r
 442      * @property activeItem\r
 443      * @hide\r
 444      */\r
 445 });\r
 446 \r
 447 Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;
 448 </pre>
 449 </body>
 450 </html>