docs/source/BoxLayout.html

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