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
 166         Ext.applyIf(info, me.getTargetInfo());
 167
 168         // We need to bind to the ownerCt whenever we do not have a user set height or width.
 169         if (owner &amp;&amp; owner.ownerCt &amp;&amp; owner.ownerCt.layout &amp;&amp; owner.ownerCt.layout.isLayout) {
 170             if (!Ext.isNumber(owner.height) || !Ext.isNumber(owner.width)) {
 171                 owner.ownerCt.layout.bindToOwnerCtComponent = true;
 172             }
 173             else {
 174                 owner.ownerCt.layout.bindToOwnerCtComponent = false;
 175             }
 176         }
 177
 178         // Determine if we have an autoHeight or autoWidth.
 179         if (height === undefined || height === null || width === undefined || width === null) {
 180             padding = info.padding;
 181             border = info.border;
 182             frameSize = me.frameSize;
 183
 184             // Auto-everything, clear out any style height/width and read from css
 185             if ((height === undefined || height === null) &amp;&amp; (width === undefined || width === null)) {
 186                 autoHeight = true;
 187                 autoWidth = true;
 188                 me.setTargetSize(null);
 189                 me.setBodyBox({width: null, height: null});
 190             }
 191             // Auto-height
 192             else if (height === undefined || height === null) {
 193                 autoHeight = true;
 194                 // Clear any sizing that we already set in a previous layout
 195                 me.setTargetSize(width);
 196                 me.setBodyBox({width: width - padding.left - border.left - padding.right - border.right - frameSize.left - frameSize.right, height: null});
 197             // Auto-width
 198             }
 199             else {
 200                 autoWidth = true;
 201                 // Clear any sizing that we already set in a previous layout
 202                 me.setTargetSize(null, height);
 203                 me.setBodyBox({width: null, height: height - padding.top - padding.bottom - border.top - border.bottom - frameSize.top - frameSize.bottom});
 204             }
 205
 206             // Run the container
 207             if (layout &amp;&amp; layout.isLayout) {
 208                 // Auto-Sized so have the container layout notify the component layout.
 209                 layout.bindToOwnerCtComponent = true;
 210                 layout.layout();
 211
 212                 // If this is an autosized container layout, then we must compensate for a
 213                 // body that is being autosized.  We do not want to adjust the body's size
 214                 // to accommodate the dock items, but rather we will want to adjust the
 215                 // target's size.
 216                 //
 217                 // This is necessary because, particularly in a Box layout, all child items
 218                 // are set with absolute dimensions that are not flexible to the size of its
 219                 // innerCt/target.  So once they are laid out, they are sized for good. By
 220                 // shrinking the body box to accommodate dock items, we're merely cutting off
 221                 // parts of the body.  Not good.  Instead, the target's size should expand
 222                 // to fit the dock items in.  This is valid because the target container is
 223                 // suppose to be autosized to fit everything accordingly.
 224                 info.autoSizedCtLayout = layout.autoSize === true;
 225             }
 226
 227             // The dockItems method will add all the top and bottom docked items height
 228             // to the info.panelSize height. That's why we have to call setSize after
 229             // we dock all the items to actually set the panel's width and height.
 230             // We have to do this because the panel body and docked items will be position
 231             // absolute which doesn't stretch the panel.
 232             me.dockItems(autoWidth, autoHeight);
 233             me.setTargetSize(info.size.width, info.size.height);
 234         }
 235         else {
 236             me.setTargetSize(width, height);
 237             me.dockItems();
 238         }
 239         me.callParent(arguments);
 240     },
 241
 242 <span id='Ext-layout-component-AbstractDock-method-dockItems'>    /**
 243 </span>     * @protected
 244      * This method will first update all the information about the docked items,
 245      * body dimensions and position, the panel's total size. It will then
 246      * set all these values on the docked items and panel body.
 247      * @param {Array} items Array containing all the docked items
 248      * @param {Boolean} autoBoxes Set this to true if the Panel is part of an
 249      * AutoContainerLayout
 250      */
 251     dockItems : function(autoWidth, autoHeight) {
 252         this.calculateDockBoxes(autoWidth, autoHeight);
 253
 254         // Both calculateAutoBoxes and calculateSizedBoxes are changing the
 255         // information about the body, panel size, and boxes for docked items
 256         // inside a property called info.
 257         var info = this.info,
 258             boxes = info.boxes,
 259             ln = boxes.length,
 260             dock, i;
 261
 262         // We are going to loop over all the boxes that were calculated
 263         // and set the position of each item the box belongs to.
 264         for (i = 0; i &lt; ln; i++) {
 265             dock = boxes[i];
 266             dock.item.setPosition(dock.x, dock.y);
 267             if ((autoWidth || autoHeight) &amp;&amp; dock.layout &amp;&amp; dock.layout.isLayout) {
 268                 // Auto-Sized so have the container layout notify the component layout.
 269                 dock.layout.bindToOwnerCtComponent = true;
 270             }
 271         }
 272
 273         // Don't adjust body width/height if the target is using an auto container layout.
 274         // But, we do want to adjust the body size if the container layout is auto sized.
 275         if (!info.autoSizedCtLayout) {
 276             if (autoWidth) {
 277                 info.bodyBox.width = null;
 278             }
 279             if (autoHeight) {
 280                 info.bodyBox.height = null;
 281             }
 282         }
 283
 284         // If the bodyBox has been adjusted because of the docked items
 285         // we will update the dimensions and position of the panel's body.
 286         this.setBodyBox(info.bodyBox);
 287     },
 288
 289 <span id='Ext-layout-component-AbstractDock-method-calculateDockBoxes'>    /**
 290 </span>     * @protected
 291      * This method will set up some initial information about the panel size and bodybox
 292      * and then loop over all the items you pass it to take care of stretching, aligning,
 293      * dock position and all calculations involved with adjusting the body box.
 294      * @param {Array} items Array containing all the docked items we have to layout
 295      */
 296     calculateDockBoxes : function(autoWidth, autoHeight) {
 297         // We want to use the Panel's el width, and the Panel's body height as the initial
 298         // size we are going to use in calculateDockBoxes. We also want to account for
 299         // the border of the panel.
 300         var me = this,
 301             target = me.getTarget(),
 302             items = me.getLayoutItems(),
 303             owner = me.owner,
 304             bodyEl = owner.body,
 305             info = me.info,
 306             size = info.size,
 307             ln = items.length,
 308             padding = info.padding,
 309             border = info.border,
 310             frameSize = me.frameSize,
 311             item, i, box, rect;
 312
 313         // If this Panel is inside an AutoContainerLayout, we will base all the calculations
 314         // around the height of the body and the width of the panel.
 315         if (autoHeight) {
 316             size.height = bodyEl.getHeight() + padding.top + border.top + padding.bottom + border.bottom + frameSize.top + frameSize.bottom;
 317         }
 318         else {
 319             size.height = target.getHeight();
 320         }
 321         if (autoWidth) {
 322             size.width = bodyEl.getWidth() + padding.left + border.left + padding.right + border.right + frameSize.left + frameSize.right;
 323         }
 324         else {
 325             size.width = target.getWidth();
 326         }
 327
 328         info.bodyBox = {
 329             x: padding.left + frameSize.left,
 330             y: padding.top + frameSize.top,
 331             width: size.width - padding.left - border.left - padding.right - border.right - frameSize.left - frameSize.right,
 332             height: size.height - border.top - padding.top - border.bottom - padding.bottom - frameSize.top - frameSize.bottom
 333         };
 334
 335         // Loop over all the docked items
 336         for (i = 0; i &lt; ln; i++) {
 337             item = items[i];
 338             // The initBox method will take care of stretching and alignment
 339             // In some cases it will also layout the dock items to be able to
 340             // get a width or height measurement
 341             box = me.initBox(item);
 342
 343             if (autoHeight === true) {
 344                 box = me.adjustAutoBox(box, i);
 345             }
 346             else {
 347                 box = me.adjustSizedBox(box, i);
 348             }
 349
 350             // Save our box. This allows us to loop over all docked items and do all
 351             // calculations first. Then in one loop we will actually size and position
 352             // all the docked items that have changed.
 353             info.boxes.push(box);
 354         }
 355     },
 356
 357 <span id='Ext-layout-component-AbstractDock-method-adjustSizedBox'>    /**
 358 </span>     * @protected
 359      * This method will adjust the position of the docked item and adjust the body box
 360      * accordingly.
 361      * @param {Object} box The box containing information about the width and height
 362      * of this docked item
 363      * @param {Number} index The index position of this docked item
 364      * @return {Object} The adjusted box
 365      */
 366     adjustSizedBox : function(box, index) {
 367         var bodyBox = this.info.bodyBox,
 368             frameSize = this.frameSize,
 369             info = this.info,
 370             padding = info.padding,
 371             pos = box.type,
 372             border = info.border;
 373
 374         switch (pos) {
 375             case 'top':
 376                 box.y = bodyBox.y;
 377                 break;
 378
 379             case 'left':
 380                 box.x = bodyBox.x;
 381                 break;
 382
 383             case 'bottom':
 384                 box.y = (bodyBox.y + bodyBox.height) - box.height;
 385                 break;
 386
 387             case 'right':
 388                 box.x = (bodyBox.x + bodyBox.width) - box.width;
 389                 break;
 390         }
 391
 392         if (box.ignoreFrame) {
 393             if (pos == 'bottom') {
 394                 box.y += (frameSize.bottom + padding.bottom + border.bottom);
 395             }
 396             else {
 397                 box.y -= (frameSize.top + padding.top + border.top);
 398             }
 399             if (pos == 'right') {
 400                 box.x += (frameSize.right + padding.right + border.right);
 401             }
 402             else {
 403                 box.x -= (frameSize.left + padding.left + border.left);
 404             }
 405         }
 406
 407         // If this is not an overlaying docked item, we have to adjust the body box
 408         if (!box.overlay) {
 409             switch (pos) {
 410                 case 'top':
 411                     bodyBox.y += box.height;
 412                     bodyBox.height -= box.height;
 413                     break;
 414
 415                 case 'left':
 416                     bodyBox.x += box.width;
 417                     bodyBox.width -= box.width;
 418                     break;
 419
 420                 case 'bottom':
 421                     bodyBox.height -= box.height;
 422                     break;
 423
 424                 case 'right':
 425                     bodyBox.width -= box.width;
 426                     break;
 427             }
 428         }
 429         return box;
 430     },
 431
 432 <span id='Ext-layout-component-AbstractDock-method-adjustAutoBox'>    /**
 433 </span>     * @protected
 434      * This method will adjust the position of the docked item inside an AutoContainerLayout
 435      * and adjust the body box accordingly.
 436      * @param {Object} box The box containing information about the width and height
 437      * of this docked item
 438      * @param {Number} index The index position of this docked item
 439      * @return {Object} The adjusted box
 440      */
 441     adjustAutoBox : function (box, index) {
 442         var info = this.info,
 443             bodyBox = info.bodyBox,
 444             size = info.size,
 445             boxes = info.boxes,
 446             boxesLn = boxes.length,
 447             pos = box.type,
 448             frameSize = this.frameSize,
 449             padding = info.padding,
 450             border = info.border,
 451             autoSizedCtLayout = info.autoSizedCtLayout,
 452             ln = (boxesLn &lt; index) ? boxesLn : index,
 453             i, adjustBox;
 454
 455         if (pos == 'top' || pos == 'bottom') {
 456             // This can affect the previously set left and right and bottom docked items
 457             for (i = 0; i &lt; ln; i++) {
 458                 adjustBox = boxes[i];
 459                 if (adjustBox.stretched &amp;&amp; adjustBox.type == 'left' || adjustBox.type == 'right') {
 460                     adjustBox.height += box.height;
 461                 }
 462                 else if (adjustBox.type == 'bottom') {
 463                     adjustBox.y += box.height;
 464                 }
 465             }
 466         }
 467
 468         switch (pos) {
 469             case 'top':
 470                 box.y = bodyBox.y;
 471                 if (!box.overlay) {
 472                     bodyBox.y += box.height;
 473                 }
 474                 size.height += box.height;
 475                 break;
 476
 477             case 'bottom':
 478                 box.y = (bodyBox.y + bodyBox.height);
 479                 size.height += box.height;
 480                 break;
 481
 482             case 'left':
 483                 box.x = bodyBox.x;
 484                 if (!box.overlay) {
 485                     bodyBox.x += box.width;
 486                     if (autoSizedCtLayout) {
 487                         size.width += box.width;
 488                     } else {
 489                         bodyBox.width -= box.width;
 490                     }
 491                 }
 492                 break;
 493
 494             case 'right':
 495                 if (!box.overlay) {
 496                     if (autoSizedCtLayout) {
 497                         size.width += box.width;
 498                     } else {
 499                         bodyBox.width -= box.width;
 500                     }
 501                 }
 502                 box.x = (bodyBox.x + bodyBox.width);
 503                 break;
 504         }
 505
 506         if (box.ignoreFrame) {
 507             if (pos == 'bottom') {
 508                 box.y += (frameSize.bottom + padding.bottom + border.bottom);
 509             }
 510             else {
 511                 box.y -= (frameSize.top + padding.top + border.top);
 512             }
 513             if (pos == 'right') {
 514                 box.x += (frameSize.right + padding.right + border.right);
 515             }
 516             else {
 517                 box.x -= (frameSize.left + padding.left + border.left);
 518             }
 519         }
 520         return box;
 521     },
 522
 523 <span id='Ext-layout-component-AbstractDock-method-initBox'>    /**
 524 </span>     * @protected
 525      * This method will create a box object, with a reference to the item, the type of dock
 526      * (top, left, bottom, right). It will also take care of stretching and aligning of the
 527      * docked items.
 528      * @param {Ext.Component} item The docked item we want to initialize the box for
 529      * @return {Object} The initial box containing width and height and other useful information
 530      */
 531     initBox : function(item) {
 532         var me = this,
 533             bodyBox = me.info.bodyBox,
 534             horizontal = (item.dock == 'top' || item.dock == 'bottom'),
 535             owner = me.owner,
 536             frameSize = me.frameSize,
 537             info = me.info,
 538             padding = info.padding,
 539             border = info.border,
 540             box = {
 541                 item: item,
 542                 overlay: item.overlay,
 543                 type: item.dock,
 544                 offsets: Ext.core.Element.parseBox(item.offsets || {}),
 545                 ignoreFrame: item.ignoreParentFrame
 546             };
 547         // First we are going to take care of stretch and align properties for all four dock scenarios.
 548         if (item.stretch !== false) {
 549             box.stretched = true;
 550             if (horizontal) {
 551                 box.x = bodyBox.x + box.offsets.left;
 552                 box.width = bodyBox.width - (box.offsets.left + box.offsets.right);
 553                 if (box.ignoreFrame) {
 554                     box.width += (frameSize.left + frameSize.right + border.left + border.right + padding.left + padding.right);
 555                 }
 556                 item.setCalculatedSize(box.width - item.el.getMargin('lr'), undefined, owner);
 557             }
 558             else {
 559                 box.y = bodyBox.y + box.offsets.top;
 560                 box.height = bodyBox.height - (box.offsets.bottom + box.offsets.top);
 561                 if (box.ignoreFrame) {
 562                     box.height += (frameSize.top + frameSize.bottom + border.top + border.bottom + padding.top + padding.bottom);
 563                 }
 564                 item.setCalculatedSize(undefined, box.height - item.el.getMargin('tb'), owner);
 565
 566                 // At this point IE will report the left/right-docked toolbar as having a width equal to the
 567                 // container's full width. Forcing a repaint kicks it into shape so it reports the correct width.
 568                 if (!Ext.supports.ComputedStyle) {
 569                     item.el.repaint();
 570                 }
 571             }
 572         }
 573         else {
 574             item.doComponentLayout();
 575             box.width = item.getWidth() - (box.offsets.left + box.offsets.right);
 576             box.height = item.getHeight() - (box.offsets.bottom + box.offsets.top);
 577             box.y += box.offsets.top;
 578             if (horizontal) {
 579                 box.x = (item.align == 'right') ? bodyBox.width - box.width : bodyBox.x;
 580                 box.x += box.offsets.left;
 581             }
 582         }
 583
 584         // If we haven't calculated the width or height of the docked item yet
 585         // do so, since we need this for our upcoming calculations
 586         if (box.width == undefined) {
 587             box.width = item.getWidth() + item.el.getMargin('lr');
 588         }
 589         if (box.height == undefined) {
 590             box.height = item.getHeight() + item.el.getMargin('tb');
 591         }
 592
 593         return box;
 594     },
 595
 596 <span id='Ext-layout-component-AbstractDock-method-getLayoutItems'>    /**
 597 </span>     * @protected
 598      * Returns an array containing all the &lt;b&gt;visible&lt;/b&gt; docked items inside this layout's owner Panel
 599      * @return {Array} An array containing all the &lt;b&gt;visible&lt;/b&gt; docked items of the Panel
 600      */
 601     getLayoutItems : function() {
 602         var it = this.owner.getDockedItems(),
 603             ln = it.length,
 604             i = 0,
 605             result = [];
 606         for (; i &lt; ln; i++) {
 607             if (it[i].isVisible(true)) {
 608                 result.push(it[i]);
 609             }
 610         }
 611         return result;
 612     },
 613
 614 <span id='Ext-layout-component-AbstractDock-method-renderItems'>    /**
 615 </span>     * @protected
 616      * Render the top and left docked items before any existing DOM nodes in our render target,
 617      * and then render the right and bottom docked items after. This is important, for such things
 618      * as tab stops and ARIA readers, that the DOM nodes are in a meaningful order.
 619      * Our collection of docked items will already be ordered via Panel.getDockedItems().
 620      */
 621     renderItems: function(items, target) {
 622         var cns = target.dom.childNodes,
 623             cnsLn = cns.length,
 624             ln = items.length,
 625             domLn = 0,
 626             i, j, cn, item;
 627
 628         // Calculate the number of DOM nodes in our target that are not our docked items
 629         for (i = 0; i &lt; cnsLn; i++) {
 630             cn = Ext.get(cns[i]);
 631             for (j = 0; j &lt; ln; j++) {
 632                 item = items[j];
 633                 if (item.rendered &amp;&amp; (cn.id == item.el.id || cn.down('#' + item.el.id))) {
 634                     break;
 635                 }
 636             }
 637
 638             if (j === ln) {
 639                 domLn++;
 640             }
 641         }
 642
 643         // Now we go through our docked items and render/move them
 644         for (i = 0, j = 0; i &lt; ln; i++, j++) {
 645             item = items[i];
 646
 647             // If we're now at the right/bottom docked item, we jump ahead in our
 648             // DOM position, just past the existing DOM nodes.
 649             //
 650             // TODO: This is affected if users provide custom weight values to their
 651             // docked items, which puts it out of (t,l,r,b) order. Avoiding a second
 652             // sort operation here, for now, in the name of performance. getDockedItems()
 653             // needs the sort operation not just for this layout-time rendering, but
 654             // also for getRefItems() to return a logical ordering (FocusManager, CQ, et al).
 655             if (i === j &amp;&amp; (item.dock === 'right' || item.dock === 'bottom')) {
 656                 j += domLn;
 657             }
 658
 659             // Same logic as Layout.renderItems()
 660             if (item &amp;&amp; !item.rendered) {
 661                 this.renderItem(item, target, j);
 662             }
 663             else if (!this.isValidParent(item, target, j)) {
 664                 this.moveItem(item, target, j);
 665             }
 666         }
 667     },
 668
 669 <span id='Ext-layout-component-AbstractDock-method-setBodyBox'>    /**
 670 </span>     * @protected
 671      * This function will be called by the dockItems method. Since the body is positioned absolute,
 672      * we need to give it dimensions and a position so that it is in the middle surrounded by
 673      * docked items
 674      * @param {Object} box An object containing new x, y, width and height values for the
 675      * Panel's body
 676      */
 677     setBodyBox : function(box) {
 678         var me = this,
 679             owner = me.owner,
 680             body = owner.body,
 681             info = me.info,
 682             bodyMargin = info.bodyMargin,
 683             padding = info.padding,
 684             border = info.border,
 685             frameSize = me.frameSize;
 686
 687         // Panel collapse effectively hides the Panel's body, so this is a no-op.
 688         if (owner.collapsed) {
 689             return;
 690         }
 691
 692         if (Ext.isNumber(box.width)) {
 693             box.width -= bodyMargin.left + bodyMargin.right;
 694         }
 695
 696         if (Ext.isNumber(box.height)) {
 697             box.height -= bodyMargin.top + bodyMargin.bottom;
 698         }
 699
 700         me.setElementSize(body, box.width, box.height);
 701         if (Ext.isNumber(box.x)) {
 702             body.setLeft(box.x - padding.left - frameSize.left);
 703         }
 704         if (Ext.isNumber(box.y)) {
 705             body.setTop(box.y - padding.top - frameSize.top);
 706         }
 707     },
 708
 709 <span id='Ext-layout-component-AbstractDock-method-configureItem'>    /**
 710 </span>     * @protected
 711      * We are overriding the Ext.layout.Layout configureItem method to also add a class that
 712      * indicates the position of the docked item. We use the itemCls (x-docked) as a prefix.
 713      * An example of a class added to a dock: right item is x-docked-right
 714      * @param {Ext.Component} item The item we are configuring
 715      */
 716     configureItem : function(item, pos) {
 717         this.callParent(arguments);
 718
 719         item.addCls(Ext.baseCSSPrefix + 'docked');
 720         item.addClsWithUI('docked-' + item.dock);
 721     },
 722
 723     afterRemove : function(item) {
 724         this.callParent(arguments);
 725         if (this.itemCls) {
 726             item.el.removeCls(this.itemCls + '-' + item.dock);
 727         }
 728         var dom = item.el.dom;
 729
 730         if (!item.destroying &amp;&amp; dom) {
 731             dom.parentNode.removeChild(dom);
 732         }
 733         this.childrenChanged = true;
 734     }
 735 });</pre>
 736 </body>
 737 </html>