docs/source/AbstractDock.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-layout-component-AbstractDock'>/**
  19 </span> * @class Ext.layout.component.AbstractDock
  20  * @extends Ext.layout.component.Component
  21  * @private
  22  * This ComponentLayout handles docking for Panels. It takes care of panels that are
  23  * part of a ContainerLayout that sets this Panel's size and Panels that are part of
  24  * an AutoContainerLayout in which this panel get his height based of the CSS or
  25  * or its content.
  26  */
  27
  28 Ext.define('Ext.layout.component.AbstractDock', {
  29
  30     /* Begin Definitions */
  31
  32     extend: 'Ext.layout.component.Component',
  33
  34     /* End Definitions */
  35
  36     type: 'dock',
  37
  38 <span id='Ext-layout-component-AbstractDock-property-autoSizing'>    /**
  39 </span>     * @private
  40      * @property autoSizing
  41      * @type boolean
  42      * This flag is set to indicate this layout may have an autoHeight/autoWidth.
  43      */
  44     autoSizing: true,
  45
  46     beforeLayout: function() {
  47         var returnValue = this.callParent(arguments);
  48         if (returnValue !== false &amp;&amp; (!this.initializedBorders || this.childrenChanged) &amp;&amp; (!this.owner.border || this.owner.manageBodyBorders)) {
  49             this.handleItemBorders();
  50             this.initializedBorders = true;
  51         }
  52         return returnValue;
  53     },
  54
  55     handleItemBorders: function() {
  56         var owner = this.owner,
  57             body = owner.body,
  58             docked = this.getLayoutItems(),
  59             borders = {
  60                 top: [],
  61                 right: [],
  62                 bottom: [],
  63                 left: []
  64             },
  65             oldBorders = this.borders,
  66             opposites = {
  67                 top: 'bottom',
  68                 right: 'left',
  69                 bottom: 'top',
  70                 left: 'right'
  71             },
  72             i, ln, item, dock, side;
  73
  74         for (i = 0, ln = docked.length; i &lt; ln; i++) {
  75             item = docked[i];
  76             dock = item.dock;
  77
  78             if (item.ignoreBorderManagement) {
  79                 continue;
  80             }
  81
  82             if (!borders[dock].satisfied) {
  83                 borders[dock].push(item);
  84                 borders[dock].satisfied = true;
  85             }
  86
  87             if (!borders.top.satisfied &amp;&amp; opposites[dock] !== 'top') {
  88                 borders.top.push(item);
  89             }
  90             if (!borders.right.satisfied &amp;&amp; opposites[dock] !== 'right') {
  91                 borders.right.push(item);
  92             }
  93             if (!borders.bottom.satisfied &amp;&amp; opposites[dock] !== 'bottom') {
  94                 borders.bottom.push(item);
  95             }
  96             if (!borders.left.satisfied &amp;&amp; opposites[dock] !== 'left') {
  97                 borders.left.push(item);
  98             }
  99         }
 100
 101         if (oldBorders) {
 102             for (side in oldBorders) {
 103                 if (oldBorders.hasOwnProperty(side)) {
 104                     ln = oldBorders[side].length;
 105                     if (!owner.manageBodyBorders) {
 106                         for (i = 0; i &lt; ln; i++) {
 107                             oldBorders[side][i].removeCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);
 108                         }
 109                         if (!oldBorders[side].satisfied &amp;&amp; !owner.bodyBorder) {
 110                             body.removeCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);
 111                         }
 112                     }
 113                     else if (oldBorders[side].satisfied) {
 114                         body.setStyle('border-' + side + '-width', '');
 115                     }
 116                 }
 117             }
 118         }
 119
 120         for (side in borders) {
 121             if (borders.hasOwnProperty(side)) {
 122                 ln = borders[side].length;
 123                 if (!owner.manageBodyBorders) {
 124                     for (i = 0; i &lt; ln; i++) {
 125                         borders[side][i].addCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);
 126                     }
 127                     if ((!borders[side].satisfied &amp;&amp; !owner.bodyBorder) || owner.bodyBorder === false) {
 128                         body.addCls(Ext.baseCSSPrefix + 'docked-noborder-' + side);
 129                     }
 130                 }
 131                 else if (borders[side].satisfied) {
 132                     body.setStyle('border-' + side + '-width', '1px');
 133                 }
 134             }
 135         }
 136
 137         this.borders = borders;
 138     },
 139
 140 <span id='Ext-layout-component-AbstractDock-method-onLayout'>    /**
 141 </span>     * @protected
 142      * @param {Ext.Component} owner The Panel that owns this DockLayout
 143      * @param {Ext.core.Element} target The target in which we are going to render the docked items
 144      * @param {Array} args The arguments passed to the ComponentLayout.layout method
 145      */
 146     onLayout: function(width, height) {
 147         var me = this,
 148             owner = me.owner,
 149             body = owner.body,
 150             layout = owner.layout,
 151             target = me.getTarget(),
 152             autoWidth = false,
 153             autoHeight = false,
 154             padding, border, frameSize;
 155
 156         // We start of by resetting all the layouts info
 157         var info = me.info = {
 158             boxes: [],
 159             size: {
 160                 width: width,
 161                 height: height
 162             },
 163             bodyBox: {}
 164         };
 165         // Clear isAutoDock flag
 166         delete layout.isAutoDock;
 167
 168         Ext.applyIf(info, me.getTargetInfo());
 169
 170         // We need to bind to the ownerCt whenever we do not have a user set height or width.
 171         if (owner &amp;&amp; owner.ownerCt &amp;&amp; owner.ownerCt.layout &amp;&amp; owner.ownerCt.layout.isLayout) {
 172             if (!Ext.isNumber(owner.height) || !Ext.isNumber(owner.width)) {
 173                 owner.ownerCt.layout.bindToOwnerCtComponent = true;
 174             }
 175             else {
 176                 owner.ownerCt.layout.bindToOwnerCtComponent = false;
 177             }
 178         }
 179
 180         // Determine if we have an autoHeight or autoWidth.
 181         if (height === undefined || height === null || width === undefined || width === null) {
 182             padding = info.padding;
 183             border = info.border;
 184             frameSize = me.frameSize;
 185
 186             // Auto-everything, clear out any style height/width and read from css
 187             if ((height === undefined || height === null) &amp;&amp; (width === undefined || width === null)) {
 188                 autoHeight = true;
 189                 autoWidth = true;
 190                 me.setTargetSize(null);
 191                 me.setBodyBox({width: null, height: null});
 192             }
 193             // Auto-height
 194             else if (height === undefined || height === null) {
 195                 autoHeight = true;
 196                 // Clear any sizing that we already set in a previous layout
 197                 me.setTargetSize(width);
 198                 me.setBodyBox({width: width - padding.left - border.left - padding.right - border.right - frameSize.left - frameSize.right, height: null});
 199             // Auto-width
 200             }
 201             else {
 202                 autoWidth = true;
 203                 // Clear any sizing that we already set in a previous layout
 204                 me.setTargetSize(null, height);
 205                 me.setBodyBox({width: null, height: height - padding.top - padding.bottom - border.top - border.bottom - frameSize.top - frameSize.bottom});
 206             }
 207
 208             // Run the container
 209             if (layout &amp;&amp; layout.isLayout) {
 210                 // Auto-Sized so have the container layout notify the component layout.
 211                 layout.bindToOwnerCtComponent = true;
 212                 // Set flag so we don't do a redundant container layout
 213                 layout.isAutoDock = layout.autoSize !== true;
 214                 layout.layout();
 215
 216                 // If this is an autosized container layout, then we must compensate for a
 217                 // body that is being autosized.  We do not want to adjust the body's size
 218                 // to accommodate the dock items, but rather we will want to adjust the
 219                 // target's size.
 220                 //
 221                 // This is necessary because, particularly in a Box layout, all child items
 222                 // are set with absolute dimensions that are not flexible to the size of its
 223                 // innerCt/target.  So once they are laid out, they are sized for good. By
 224                 // shrinking the body box to accommodate dock items, we're merely cutting off
 225                 // parts of the body.  Not good.  Instead, the target's size should expand
 226                 // to fit the dock items in.  This is valid because the target container is
 227                 // suppose to be autosized to fit everything accordingly.
 228                 info.autoSizedCtLayout = layout.autoSize === true;
 229             }
 230
 231             // The dockItems method will add all the top and bottom docked items height
 232             // to the info.panelSize height. That's why we have to call setSize after
 233             // we dock all the items to actually set the panel's width and height.
 234             // We have to do this because the panel body and docked items will be position
 235             // absolute which doesn't stretch the panel.
 236             me.dockItems(autoWidth, autoHeight);
 237             me.setTargetSize(info.size.width, info.size.height);
 238         }
 239         else {
 240             me.setTargetSize(width, height);
 241             me.dockItems();
 242         }
 243         me.callParent(arguments);
 244     },
 245
 246 <span id='Ext-layout-component-AbstractDock-method-dockItems'>    /**
 247 </span>     * @protected
 248      * This method will first update all the information about the docked items,
 249      * body dimensions and position, the panel's total size. It will then
 250      * set all these values on the docked items and panel body.
 251      * @param {Array} items Array containing all the docked items
 252      * @param {Boolean} autoBoxes Set this to true if the Panel is part of an
 253      * AutoContainerLayout
 254      */
 255     dockItems : function(autoWidth, autoHeight) {
 256         this.calculateDockBoxes(autoWidth, autoHeight);
 257
 258         // Both calculateAutoBoxes and calculateSizedBoxes are changing the
 259         // information about the body, panel size, and boxes for docked items
 260         // inside a property called info.
 261         var info = this.info,
 262             boxes = info.boxes,
 263             ln = boxes.length,
 264             dock, i;
 265
 266         // We are going to loop over all the boxes that were calculated
 267         // and set the position of each item the box belongs to.
 268         for (i = 0; i &lt; ln; i++) {
 269             dock = boxes[i];
 270             dock.item.setPosition(dock.x, dock.y);
 271             if ((autoWidth || autoHeight) &amp;&amp; dock.layout &amp;&amp; dock.layout.isLayout) {
 272                 // Auto-Sized so have the container layout notify the component layout.
 273                 dock.layout.bindToOwnerCtComponent = true;
 274             }
 275         }
 276
 277         // Don't adjust body width/height if the target is using an auto container layout.
 278         // But, we do want to adjust the body size if the container layout is auto sized.
 279         if (!info.autoSizedCtLayout) {
 280             if (autoWidth) {
 281                 info.bodyBox.width = null;
 282             }
 283             if (autoHeight) {
 284                 info.bodyBox.height = null;
 285             }
 286         }
 287
 288         // If the bodyBox has been adjusted because of the docked items
 289         // we will update the dimensions and position of the panel's body.
 290         this.setBodyBox(info.bodyBox);
 291     },
 292
 293 <span id='Ext-layout-component-AbstractDock-method-calculateDockBoxes'>    /**
 294 </span>     * @protected
 295      * This method will set up some initial information about the panel size and bodybox
 296      * and then loop over all the items you pass it to take care of stretching, aligning,
 297      * dock position and all calculations involved with adjusting the body box.
 298      * @param {Array} items Array containing all the docked items we have to layout
 299      */
 300     calculateDockBoxes : function(autoWidth, autoHeight) {
 301         // We want to use the Panel's el width, and the Panel's body height as the initial
 302         // size we are going to use in calculateDockBoxes. We also want to account for
 303         // the border of the panel.
 304         var me = this,
 305             target = me.getTarget(),
 306             items = me.getLayoutItems(),
 307             owner = me.owner,
 308             bodyEl = owner.body,
 309             info = me.info,
 310             size = info.size,
 311             ln = items.length,
 312             padding = info.padding,
 313             border = info.border,
 314             frameSize = me.frameSize,
 315             item, i, box, rect;
 316
 317         // If this Panel is inside an AutoContainerLayout, we will base all the calculations
 318         // around the height of the body and the width of the panel.
 319         if (autoHeight) {
 320             size.height = bodyEl.getHeight() + padding.top + border.top + padding.bottom + border.bottom + frameSize.top + frameSize.bottom;
 321         }
 322         else {
 323             size.height = target.getHeight();
 324         }
 325         if (autoWidth) {
 326             size.width = bodyEl.getWidth() + padding.left + border.left + padding.right + border.right + frameSize.left + frameSize.right;
 327         }
 328         else {
 329             size.width = target.getWidth();
 330         }
 331
 332         info.bodyBox = {
 333             x: padding.left + frameSize.left,
 334             y: padding.top + frameSize.top,
 335             width: size.width - padding.left - border.left - padding.right - border.right - frameSize.left - frameSize.right,
 336             height: size.height - border.top - padding.top - border.bottom - padding.bottom - frameSize.top - frameSize.bottom
 337         };
 338
 339         // Loop over all the docked items
 340         for (i = 0; i &lt; ln; i++) {
 341             item = items[i];
 342             // The initBox method will take care of stretching and alignment
 343             // In some cases it will also layout the dock items to be able to
 344             // get a width or height measurement
 345             box = me.initBox(item);
 346
 347             if (autoHeight === true) {
 348                 box = me.adjustAutoBox(box, i);
 349             }
 350             else {
 351                 box = me.adjustSizedBox(box, i);
 352             }
 353
 354             // Save our box. This allows us to loop over all docked items and do all
 355             // calculations first. Then in one loop we will actually size and position
 356             // all the docked items that have changed.
 357             info.boxes.push(box);
 358         }
 359     },
 360
 361 <span id='Ext-layout-component-AbstractDock-method-adjustSizedBox'>    /**
 362 </span>     * @protected
 363      * This method will adjust the position of the docked item and adjust the body box
 364      * accordingly.
 365      * @param {Object} box The box containing information about the width and height
 366      * of this docked item
 367      * @param {Number} index The index position of this docked item
 368      * @return {Object} The adjusted box
 369      */
 370     adjustSizedBox : function(box, index) {
 371         var bodyBox = this.info.bodyBox,
 372             frameSize = this.frameSize,
 373             info = this.info,
 374             padding = info.padding,
 375             pos = box.type,
 376             border = info.border;
 377
 378         switch (pos) {
 379             case 'top':
 380                 box.y = bodyBox.y;
 381                 break;
 382
 383             case 'left':
 384                 box.x = bodyBox.x;
 385                 break;
 386
 387             case 'bottom':
 388                 box.y = (bodyBox.y + bodyBox.height) - box.height;
 389                 break;
 390
 391             case 'right':
 392                 box.x = (bodyBox.x + bodyBox.width) - box.width;
 393                 break;
 394         }
 395
 396         if (box.ignoreFrame) {
 397             if (pos == 'bottom') {
 398                 box.y += (frameSize.bottom + padding.bottom + border.bottom);
 399             }
 400             else {
 401                 box.y -= (frameSize.top + padding.top + border.top);
 402             }
 403             if (pos == 'right') {
 404                 box.x += (frameSize.right + padding.right + border.right);
 405             }
 406             else {
 407                 box.x -= (frameSize.left + padding.left + border.left);
 408             }
 409         }
 410
 411         // If this is not an overlaying docked item, we have to adjust the body box
 412         if (!box.overlay) {
 413             switch (pos) {
 414                 case 'top':
 415                     bodyBox.y += box.height;
 416                     bodyBox.height -= box.height;
 417                     break;
 418
 419                 case 'left':
 420                     bodyBox.x += box.width;
 421                     bodyBox.width -= box.width;
 422                     break;
 423
 424                 case 'bottom':
 425                     bodyBox.height -= box.height;
 426                     break;
 427
 428                 case 'right':
 429                     bodyBox.width -= box.width;
 430                     break;
 431             }
 432         }
 433         return box;
 434     },
 435
 436 <span id='Ext-layout-component-AbstractDock-method-adjustAutoBox'>    /**
 437 </span>     * @protected
 438      * This method will adjust the position of the docked item inside an AutoContainerLayout
 439      * and adjust the body box accordingly.
 440      * @param {Object} box The box containing information about the width and height
 441      * of this docked item
 442      * @param {Number} index The index position of this docked item
 443      * @return {Object} The adjusted box
 444      */
 445     adjustAutoBox : function (box, index) {
 446         var info = this.info,
 447             owner = this.owner,
 448             bodyBox = info.bodyBox,
 449             size = info.size,
 450             boxes = info.boxes,
 451             boxesLn = boxes.length,
 452             pos = box.type,
 453             frameSize = this.frameSize,
 454             padding = info.padding,
 455             border = info.border,
 456             autoSizedCtLayout = info.autoSizedCtLayout,
 457             ln = (boxesLn &lt; index) ? boxesLn : index,
 458             i, adjustBox;
 459
 460         if (pos == 'top' || pos == 'bottom') {
 461             // This can affect the previously set left and right and bottom docked items
 462             for (i = 0; i &lt; ln; i++) {
 463                 adjustBox = boxes[i];
 464                 if (adjustBox.stretched &amp;&amp; adjustBox.type == 'left' || adjustBox.type == 'right') {
 465                     adjustBox.height += box.height;
 466                 }
 467                 else if (adjustBox.type == 'bottom') {
 468                     adjustBox.y += box.height;
 469                 }
 470             }
 471         }
 472
 473         switch (pos) {
 474             case 'top':
 475                 box.y = bodyBox.y;
 476                 if (!box.overlay) {
 477                     bodyBox.y += box.height;
 478                     if (owner.isFixedHeight()) {
 479                         bodyBox.height -= box.height;
 480                     } else {
 481                         size.height += box.height;
 482                     }
 483                 }
 484                 break;
 485
 486             case 'bottom':
 487                 if (!box.overlay) {
 488                     if (owner.isFixedHeight()) {
 489                         bodyBox.height -= box.height;
 490                     } else {
 491                         size.height += box.height;
 492                     }
 493                 }
 494                 box.y = (bodyBox.y + bodyBox.height);
 495                 break;
 496
 497             case 'left':
 498                 box.x = bodyBox.x;
 499                 if (!box.overlay) {
 500                     bodyBox.x += box.width;
 501                     if (owner.isFixedWidth()) {
 502                         bodyBox.width -= box.width;
 503                     } else {
 504                         size.width += box.width;
 505                     }
 506                 }
 507                 break;
 508
 509             case 'right':
 510                 if (!box.overlay) {
 511                     if (owner.isFixedWidth()) {
 512                         bodyBox.width -= box.width;
 513                     } else {
 514                         size.width += box.width;
 515                     }
 516                 }
 517                 box.x = (bodyBox.x + bodyBox.width);
 518                 break;
 519         }
 520
 521         if (box.ignoreFrame) {
 522             if (pos == 'bottom') {
 523                 box.y += (frameSize.bottom + padding.bottom + border.bottom);
 524             }
 525             else {
 526                 box.y -= (frameSize.top + padding.top + border.top);
 527             }
 528             if (pos == 'right') {
 529                 box.x += (frameSize.right + padding.right + border.right);
 530             }
 531             else {
 532                 box.x -= (frameSize.left + padding.left + border.left);
 533             }
 534         }
 535         return box;
 536     },
 537
 538 <span id='Ext-layout-component-AbstractDock-method-initBox'>    /**
 539 </span>     * @protected
 540      * This method will create a box object, with a reference to the item, the type of dock
 541      * (top, left, bottom, right). It will also take care of stretching and aligning of the
 542      * docked items.
 543      * @param {Ext.Component} item The docked item we want to initialize the box for
 544      * @return {Object} The initial box containing width and height and other useful information
 545      */
 546     initBox : function(item) {
 547         var me = this,
 548             bodyBox = me.info.bodyBox,
 549             horizontal = (item.dock == 'top' || item.dock == 'bottom'),
 550             owner = me.owner,
 551             frameSize = me.frameSize,
 552             info = me.info,
 553             padding = info.padding,
 554             border = info.border,
 555             box = {
 556                 item: item,
 557                 overlay: item.overlay,
 558                 type: item.dock,
 559                 offsets: Ext.core.Element.parseBox(item.offsets || {}),
 560                 ignoreFrame: item.ignoreParentFrame
 561             };
 562         // First we are going to take care of stretch and align properties for all four dock scenarios.
 563         if (item.stretch !== false) {
 564             box.stretched = true;
 565             if (horizontal) {
 566                 box.x = bodyBox.x + box.offsets.left;
 567                 box.width = bodyBox.width - (box.offsets.left + box.offsets.right);
 568                 if (box.ignoreFrame) {
 569                     box.width += (frameSize.left + frameSize.right + border.left + border.right + padding.left + padding.right);
 570                 }
 571                 item.setCalculatedSize(box.width - item.el.getMargin('lr'), undefined, owner);
 572             }
 573             else {
 574                 box.y = bodyBox.y + box.offsets.top;
 575                 box.height = bodyBox.height - (box.offsets.bottom + box.offsets.top);
 576                 if (box.ignoreFrame) {
 577                     box.height += (frameSize.top + frameSize.bottom + border.top + border.bottom + padding.top + padding.bottom);
 578                 }
 579                 item.setCalculatedSize(undefined, box.height - item.el.getMargin('tb'), owner);
 580
 581                 // At this point IE will report the left/right-docked toolbar as having a width equal to the
 582                 // container's full width. Forcing a repaint kicks it into shape so it reports the correct width.
 583                 if (!Ext.supports.ComputedStyle) {
 584                     item.el.repaint();
 585                 }
 586             }
 587         }
 588         else {
 589             item.doComponentLayout();
 590             box.width = item.getWidth() - (box.offsets.left + box.offsets.right);
 591             box.height = item.getHeight() - (box.offsets.bottom + box.offsets.top);
 592             box.y += box.offsets.top;
 593             if (horizontal) {
 594                 box.x = (item.align == 'right') ? bodyBox.width - box.width : bodyBox.x;
 595                 box.x += box.offsets.left;
 596             }
 597         }
 598
 599         // If we haven't calculated the width or height of the docked item yet
 600         // do so, since we need this for our upcoming calculations
 601         if (box.width == undefined) {
 602             box.width = item.getWidth() + item.el.getMargin('lr');
 603         }
 604         if (box.height == undefined) {
 605             box.height = item.getHeight() + item.el.getMargin('tb');
 606         }
 607
 608         return box;
 609     },
 610
 611 <span id='Ext-layout-component-AbstractDock-method-getLayoutItems'>    /**
 612 </span>     * @protected
 613      * Returns an array containing all the &lt;b&gt;visible&lt;/b&gt; docked items inside this layout's owner Panel
 614      * @return {Array} An array containing all the &lt;b&gt;visible&lt;/b&gt; docked items of the Panel
 615      */
 616     getLayoutItems : function() {
 617         var it = this.owner.getDockedItems(),
 618             ln = it.length,
 619             i = 0,
 620             result = [];
 621         for (; i &lt; ln; i++) {
 622             if (it[i].isVisible(true)) {
 623                 result.push(it[i]);
 624             }
 625         }
 626         return result;
 627     },
 628
 629 <span id='Ext-layout-component-AbstractDock-method-renderItems'>    /**
 630 </span>     * @protected
 631      * Render the top and left docked items before any existing DOM nodes in our render target,
 632      * and then render the right and bottom docked items after. This is important, for such things
 633      * as tab stops and ARIA readers, that the DOM nodes are in a meaningful order.
 634      * Our collection of docked items will already be ordered via Panel.getDockedItems().
 635      */
 636     renderItems: function(items, target) {
 637         var cns = target.dom.childNodes,
 638             cnsLn = cns.length,
 639             ln = items.length,
 640             domLn = 0,
 641             i, j, cn, item;
 642
 643         // Calculate the number of DOM nodes in our target that are not our docked items
 644         for (i = 0; i &lt; cnsLn; i++) {
 645             cn = Ext.get(cns[i]);
 646             for (j = 0; j &lt; ln; j++) {
 647                 item = items[j];
 648                 if (item.rendered &amp;&amp; (cn.id == item.el.id || cn.down('#' + item.el.id))) {
 649                     break;
 650                 }
 651             }
 652
 653             if (j === ln) {
 654                 domLn++;
 655             }
 656         }
 657
 658         // Now we go through our docked items and render/move them
 659         for (i = 0, j = 0; i &lt; ln; i++, j++) {
 660             item = items[i];
 661
 662             // If we're now at the right/bottom docked item, we jump ahead in our
 663             // DOM position, just past the existing DOM nodes.
 664             //
 665             // TODO: This is affected if users provide custom weight values to their
 666             // docked items, which puts it out of (t,l,r,b) order. Avoiding a second
 667             // sort operation here, for now, in the name of performance. getDockedItems()
 668             // needs the sort operation not just for this layout-time rendering, but
 669             // also for getRefItems() to return a logical ordering (FocusManager, CQ, et al).
 670             if (i === j &amp;&amp; (item.dock === 'right' || item.dock === 'bottom')) {
 671                 j += domLn;
 672             }
 673
 674             // Same logic as Layout.renderItems()
 675             if (item &amp;&amp; !item.rendered) {
 676                 this.renderItem(item, target, j);
 677             }
 678             else if (!this.isValidParent(item, target, j)) {
 679                 this.moveItem(item, target, j);
 680             }
 681         }
 682     },
 683
 684 <span id='Ext-layout-component-AbstractDock-method-setBodyBox'>    /**
 685 </span>     * @protected
 686      * This function will be called by the dockItems method. Since the body is positioned absolute,
 687      * we need to give it dimensions and a position so that it is in the middle surrounded by
 688      * docked items
 689      * @param {Object} box An object containing new x, y, width and height values for the
 690      * Panel's body
 691      */
 692     setBodyBox : function(box) {
 693         var me = this,
 694             owner = me.owner,
 695             body = owner.body,
 696             info = me.info,
 697             bodyMargin = info.bodyMargin,
 698             padding = info.padding,
 699             border = info.border,
 700             frameSize = me.frameSize;
 701
 702         // Panel collapse effectively hides the Panel's body, so this is a no-op.
 703         if (owner.collapsed) {
 704             return;
 705         }
 706
 707         if (Ext.isNumber(box.width)) {
 708             box.width -= bodyMargin.left + bodyMargin.right;
 709         }
 710
 711         if (Ext.isNumber(box.height)) {
 712             box.height -= bodyMargin.top + bodyMargin.bottom;
 713         }
 714
 715         me.setElementSize(body, box.width, box.height);
 716         if (Ext.isNumber(box.x)) {
 717             body.setLeft(box.x - padding.left - frameSize.left);
 718         }
 719         if (Ext.isNumber(box.y)) {
 720             body.setTop(box.y - padding.top - frameSize.top);
 721         }
 722     },
 723
 724 <span id='Ext-layout-component-AbstractDock-method-configureItem'>    /**
 725 </span>     * @protected
 726      * We are overriding the Ext.layout.Layout configureItem method to also add a class that
 727      * indicates the position of the docked item. We use the itemCls (x-docked) as a prefix.
 728      * An example of a class added to a dock: right item is x-docked-right
 729      * @param {Ext.Component} item The item we are configuring
 730      */
 731     configureItem : function(item, pos) {
 732         this.callParent(arguments);
 733         if (item.dock == 'top' || item.dock == 'bottom') {
 734             item.layoutManagedWidth = 1;
 735             item.layoutManagedHeight = 2;
 736         } else {
 737             item.layoutManagedWidth = 2;
 738             item.layoutManagedHeight = 1;
 739         }
 740
 741         item.addCls(Ext.baseCSSPrefix + 'docked');
 742         item.addClsWithUI('docked-' + item.dock);
 743     },
 744
 745     afterRemove : function(item) {
 746         this.callParent(arguments);
 747         if (this.itemCls) {
 748             item.el.removeCls(this.itemCls + '-' + item.dock);
 749         }
 750         var dom = item.el.dom;
 751
 752         if (!item.destroying &amp;&amp; dom) {
 753             dom.parentNode.removeChild(dom);
 754         }
 755         this.childrenChanged = true;
 756     }
 757 });</pre>
 758 </body>
 759 </html>