docs/source/AbstractContainer.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-container-AbstractContainer'>/**
  19 </span> * @class Ext.container.AbstractContainer
  20  * @extends Ext.Component
  21  * &lt;p&gt;An abstract base class which provides shared methods for Containers across the Sencha product line.&lt;/p&gt;
  22  * Please refer to sub class's documentation
  23  */
  24 Ext.define('Ext.container.AbstractContainer', {
  25
  26     /* Begin Definitions */
  27
  28     extend: 'Ext.Component',
  29
  30     requires: [
  31         'Ext.util.MixedCollection',
  32         'Ext.layout.container.Auto',
  33         'Ext.ZIndexManager'
  34     ],
  35
  36     /* End Definitions */
  37 <span id='Ext-container-AbstractContainer-cfg-layout'>    /**
  38 </span>     * @cfg {String/Object} layout
  39      * &lt;p&gt;&lt;b&gt;*Important&lt;/b&gt;: In order for child items to be correctly sized and
  40      * positioned, typically a layout manager &lt;b&gt;must&lt;/b&gt; be specified through
  41      * the &lt;code&gt;layout&lt;/code&gt; configuration option.&lt;/p&gt;
  42      * &lt;br&gt;&lt;p&gt;The sizing and positioning of child {@link #items} is the responsibility of
  43      * the Container's layout manager which creates and manages the type of layout
  44      * you have in mind.  For example:&lt;/p&gt;
  45      * &lt;p&gt;If the {@link #layout} configuration is not explicitly specified for
  46      * a general purpose container (e.g. Container or Panel) the
  47      * {@link Ext.layout.container.Auto default layout manager} will be used
  48      * which does nothing but render child components sequentially into the
  49      * Container (no sizing or positioning will be performed in this situation).&lt;/p&gt;
  50      * &lt;br&gt;&lt;p&gt;&lt;b&gt;&lt;code&gt;layout&lt;/code&gt;&lt;/b&gt; may be specified as either as an Object or
  51      * as a String:&lt;/p&gt;&lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
  52      *
  53      * &lt;li&gt;&lt;u&gt;Specify as an Object&lt;/u&gt;&lt;/li&gt;
  54      * &lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
  55      * &lt;li&gt;Example usage:&lt;/li&gt;
  56      * &lt;pre&gt;&lt;code&gt;
  57 layout: {
  58     type: 'vbox',
  59     align: 'left'
  60 }
  61        &lt;/code&gt;&lt;/pre&gt;
  62      *
  63      * &lt;li&gt;&lt;code&gt;&lt;b&gt;type&lt;/b&gt;&lt;/code&gt;&lt;/li&gt;
  64      * &lt;br/&gt;&lt;p&gt;The layout type to be used for this container.  If not specified,
  65      * a default {@link Ext.layout.container.Auto} will be created and used.&lt;/p&gt;
  66      * &lt;br/&gt;&lt;p&gt;Valid layout &lt;code&gt;type&lt;/code&gt; values are:&lt;/p&gt;
  67      * &lt;div class=&quot;sub-desc&quot;&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
  68      * &lt;li&gt;&lt;code&gt;&lt;b&gt;{@link Ext.layout.container.Auto Auto}&lt;/b&gt;&lt;/code&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;b&gt;Default&lt;/b&gt;&lt;/li&gt;
  69      * &lt;li&gt;&lt;code&gt;&lt;b&gt;{@link Ext.layout.container.Card card}&lt;/b&gt;&lt;/code&gt;&lt;/li&gt;
  70      * &lt;li&gt;&lt;code&gt;&lt;b&gt;{@link Ext.layout.container.Fit fit}&lt;/b&gt;&lt;/code&gt;&lt;/li&gt;
  71      * &lt;li&gt;&lt;code&gt;&lt;b&gt;{@link Ext.layout.container.HBox hbox}&lt;/b&gt;&lt;/code&gt;&lt;/li&gt;
  72      * &lt;li&gt;&lt;code&gt;&lt;b&gt;{@link Ext.layout.container.VBox vbox}&lt;/b&gt;&lt;/code&gt;&lt;/li&gt;
  73      * &lt;li&gt;&lt;code&gt;&lt;b&gt;{@link Ext.layout.container.Anchor anchor}&lt;/b&gt;&lt;/code&gt;&lt;/li&gt;
  74      * &lt;li&gt;&lt;code&gt;&lt;b&gt;{@link Ext.layout.container.Table table}&lt;/b&gt;&lt;/code&gt;&lt;/li&gt;
  75      * &lt;/ul&gt;&lt;/div&gt;
  76      *
  77      * &lt;li&gt;Layout specific configuration properties&lt;/li&gt;
  78      * &lt;br/&gt;&lt;p&gt;Additional layout specific configuration properties may also be
  79      * specified. For complete details regarding the valid config options for
  80      * each layout type, see the layout class corresponding to the &lt;code&gt;type&lt;/code&gt;
  81      * specified.&lt;/p&gt;
  82      *
  83      * &lt;/ul&gt;&lt;/div&gt;
  84      *
  85      * &lt;li&gt;&lt;u&gt;Specify as a String&lt;/u&gt;&lt;/li&gt;
  86      * &lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
  87      * &lt;li&gt;Example usage:&lt;/li&gt;
  88      * &lt;pre&gt;&lt;code&gt;
  89 layout: {
  90     type: 'vbox',
  91     padding: '5',
  92     align: 'left'
  93 }
  94        &lt;/code&gt;&lt;/pre&gt;
  95      * &lt;li&gt;&lt;code&gt;&lt;b&gt;layout&lt;/b&gt;&lt;/code&gt;&lt;/li&gt;
  96      * &lt;br/&gt;&lt;p&gt;The layout &lt;code&gt;type&lt;/code&gt; to be used for this container (see list
  97      * of valid layout type values above).&lt;/p&gt;&lt;br/&gt;
  98      * &lt;br/&gt;&lt;p&gt;Additional layout specific configuration properties. For complete
  99      * details regarding the valid config options for each layout type, see the
 100      * layout class corresponding to the &lt;code&gt;layout&lt;/code&gt; specified.&lt;/p&gt;
 101      * &lt;/ul&gt;&lt;/div&gt;&lt;/ul&gt;&lt;/div&gt;
 102      */
 103
 104 <span id='Ext-container-AbstractContainer-cfg-activeItem'>    /**
 105 </span>     * @cfg {String/Number} activeItem
 106      * A string component id or the numeric index of the component that should be initially activated within the
 107      * container's layout on render.  For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
 108      * item in the container's collection).  activeItem only applies to layout styles that can display
 109      * items one at a time (like {@link Ext.layout.container.Card} and {@link Ext.layout.container.Fit}).
 110      */
 111 <span id='Ext-container-AbstractContainer-cfg-items'>    /**
 112 </span>     * @cfg {Object/Array} items
 113      * &lt;p&gt;A single item, or an array of child Components to be added to this container&lt;/p&gt;
 114      * &lt;p&gt;&lt;b&gt;Unless configured with a {@link #layout}, a Container simply renders child Components serially into
 115      * its encapsulating element and performs no sizing or positioning upon them.&lt;/b&gt;&lt;p&gt;
 116      * &lt;p&gt;Example:&lt;/p&gt;
 117      * &lt;pre&gt;&lt;code&gt;
 118 // specifying a single item
 119 items: {...},
 120 layout: 'fit',    // The single items is sized to fit
 121
 122 // specifying multiple items
 123 items: [{...}, {...}],
 124 layout: 'hbox', // The items are arranged horizontally
 125        &lt;/code&gt;&lt;/pre&gt;
 126      * &lt;p&gt;Each item may be:&lt;/p&gt;
 127      * &lt;ul&gt;
 128      * &lt;li&gt;A {@link Ext.Component Component}&lt;/li&gt;
 129      * &lt;li&gt;A Component configuration object&lt;/li&gt;
 130      * &lt;/ul&gt;
 131      * &lt;p&gt;If a configuration object is specified, the actual type of Component to be
 132      * instantiated my be indicated by using the {@link Ext.Component#xtype xtype} option.&lt;/p&gt;
 133      * &lt;p&gt;Every Component class has its own {@link Ext.Component#xtype xtype}.&lt;/p&gt;
 134      * &lt;p&gt;If an {@link Ext.Component#xtype xtype} is not explicitly
 135      * specified, the {@link #defaultType} for the Container is used, which by default is usually &lt;code&gt;panel&lt;/code&gt;.&lt;/p&gt;
 136      * &lt;p&gt;&lt;b&gt;Notes&lt;/b&gt;:&lt;/p&gt;
 137      * &lt;p&gt;Ext uses lazy rendering. Child Components will only be rendered
 138      * should it become necessary. Items are automatically laid out when they are first
 139      * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call.&lt;/p&gt;
 140      * &lt;p&gt;Do not specify &lt;code&gt;{@link Ext.panel.Panel#contentEl contentEl}&lt;/code&gt; or
 141      * &lt;code&gt;{@link Ext.panel.Panel#html html}&lt;/code&gt; with &lt;code&gt;items&lt;/code&gt;.&lt;/p&gt;
 142      */
 143 <span id='Ext-container-AbstractContainer-cfg-defaults'>    /**
 144 </span>     * @cfg {Object|Function} defaults
 145      * &lt;p&gt;This option is a means of applying default settings to all added items whether added through the {@link #items}
 146      * config or via the {@link #add} or {@link #insert} methods.&lt;/p&gt;
 147      * &lt;p&gt;If an added item is a config object, and &lt;b&gt;not&lt;/b&gt; an instantiated Component, then the default properties are
 148      * unconditionally applied. If the added item &lt;b&gt;is&lt;/b&gt; an instantiated Component, then the default properties are
 149      * applied conditionally so as not to override existing properties in the item.&lt;/p&gt;
 150      * &lt;p&gt;If the defaults option is specified as a function, then the function will be called using this Container as the
 151      * scope (&lt;code&gt;this&lt;/code&gt; reference) and passing the added item as the first parameter. Any resulting object
 152      * from that call is then applied to the item as default properties.&lt;/p&gt;
 153      * &lt;p&gt;For example, to automatically apply padding to the body of each of a set of
 154      * contained {@link Ext.panel.Panel} items, you could pass: &lt;code&gt;defaults: {bodyStyle:'padding:15px'}&lt;/code&gt;.&lt;/p&gt;
 155      * &lt;p&gt;Usage:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
 156 defaults: {               // defaults are applied to items, not the container
 157     autoScroll:true
 158 },
 159 items: [
 160     {
 161         xtype: 'panel',   // defaults &lt;b&gt;do not&lt;/b&gt; have precedence over
 162         id: 'panel1',     // options in config objects, so the defaults
 163         autoScroll: false // will not be applied here, panel1 will be autoScroll:false
 164     },
 165     new Ext.panel.Panel({       // defaults &lt;b&gt;do&lt;/b&gt; have precedence over options
 166         id: 'panel2',     // options in components, so the defaults
 167         autoScroll: false // will be applied here, panel2 will be autoScroll:true.
 168     })
 169 ]&lt;/code&gt;&lt;/pre&gt;
 170      */
 171
 172 <span id='Ext-container-AbstractContainer-cfg-suspendLayout'>    /** @cfg {Boolean} suspendLayout
 173 </span>     * If true, suspend calls to doLayout.  Useful when batching multiple adds to a container and not passing them
 174      * as multiple arguments or an array.
 175      */
 176     suspendLayout : false,
 177
 178 <span id='Ext-container-AbstractContainer-cfg-autoDestroy'>    /** @cfg {Boolean} autoDestroy
 179 </span>     * If true the container will automatically destroy any contained component that is removed from it, else
 180      * destruction must be handled manually.
 181      * Defaults to true.
 182      */
 183     autoDestroy : true,
 184
 185 <span id='Ext-container-AbstractContainer-cfg-defaultType'>     /** @cfg {String} defaultType
 186 </span>      * &lt;p&gt;The default {@link Ext.Component xtype} of child Components to create in this Container when
 187       * a child item is specified as a raw configuration object, rather than as an instantiated Component.&lt;/p&gt;
 188       * &lt;p&gt;Defaults to &lt;code&gt;'panel'&lt;/code&gt;.&lt;/p&gt;
 189       */
 190     defaultType: 'panel',
 191
 192     isContainer : true,
 193
 194     baseCls: Ext.baseCSSPrefix + 'container',
 195
 196 <span id='Ext-container-AbstractContainer-cfg-bubbleEvents'>    /**
 197 </span>     * @cfg {Array} bubbleEvents
 198      * &lt;p&gt;An array of events that, when fired, should be bubbled to any parent container.
 199      * See {@link Ext.util.Observable#enableBubble}.
 200      * Defaults to &lt;code&gt;['add', 'remove']&lt;/code&gt;.
 201      */
 202     bubbleEvents: ['add', 'remove'],
 203
 204     // @private
 205     initComponent : function(){
 206         var me = this;
 207         me.addEvents(
 208 <span id='Ext-container-AbstractContainer-event-afterlayout'>            /**
 209 </span>             * @event afterlayout
 210              * Fires when the components in this container are arranged by the associated layout manager.
 211              * @param {Ext.container.Container} this
 212              * @param {ContainerLayout} layout The ContainerLayout implementation for this container
 213              */
 214             'afterlayout',
 215 <span id='Ext-container-AbstractContainer-event-beforeadd'>            /**
 216 </span>             * @event beforeadd
 217              * Fires before any {@link Ext.Component} is added or inserted into the container.
 218              * A handler can return false to cancel the add.
 219              * @param {Ext.container.Container} this
 220              * @param {Ext.Component} component The component being added
 221              * @param {Number} index The index at which the component will be added to the container's items collection
 222              */
 223             'beforeadd',
 224 <span id='Ext-container-AbstractContainer-event-beforeremove'>            /**
 225 </span>             * @event beforeremove
 226              * Fires before any {@link Ext.Component} is removed from the container.  A handler can return
 227              * false to cancel the remove.
 228              * @param {Ext.container.Container} this
 229              * @param {Ext.Component} component The component being removed
 230              */
 231             'beforeremove',
 232 <span id='Ext-container-AbstractContainer-event-add'>            /**
 233 </span>             * @event add
 234              * @bubbles
 235              * Fires after any {@link Ext.Component} is added or inserted into the container.
 236              * @param {Ext.container.Container} this
 237              * @param {Ext.Component} component The component that was added
 238              * @param {Number} index The index at which the component was added to the container's items collection
 239              */
 240             'add',
 241 <span id='Ext-container-AbstractContainer-event-remove'>            /**
 242 </span>             * @event remove
 243              * @bubbles
 244              * Fires after any {@link Ext.Component} is removed from the container.
 245              * @param {Ext.container.Container} this
 246              * @param {Ext.Component} component The component that was removed
 247              */
 248             'remove',
 249 <span id='Ext-container-AbstractContainer-event-beforecardswitch'>            /**
 250 </span>             * @event beforecardswitch
 251              * Fires before this container switches the active card. This event
 252              * is only available if this container uses a CardLayout. Note that
 253              * TabPanel and Carousel both get a CardLayout by default, so both
 254              * will have this event.
 255              * A handler can return false to cancel the card switch.
 256              * @param {Ext.container.Container} this
 257              * @param {Ext.Component} newCard The card that will be switched to
 258              * @param {Ext.Component} oldCard The card that will be switched from
 259              * @param {Number} index The index of the card that will be switched to
 260              * @param {Boolean} animated True if this cardswitch will be animated
 261              */
 262             'beforecardswitch',
 263 <span id='Ext-container-AbstractContainer-event-cardswitch'>            /**
 264 </span>             * @event cardswitch
 265              * Fires after this container switches the active card. If the card
 266              * is switched using an animation, this event will fire after the
 267              * animation has finished. This event is only available if this container
 268              * uses a CardLayout. Note that TabPanel and Carousel both get a CardLayout
 269              * by default, so both will have this event.
 270              * @param {Ext.container.Container} this
 271              * @param {Ext.Component} newCard The card that has been switched to
 272              * @param {Ext.Component} oldCard The card that has been switched from
 273              * @param {Number} index The index of the card that has been switched to
 274              * @param {Boolean} animated True if this cardswitch was animated
 275              */
 276             'cardswitch'
 277         );
 278
 279         // layoutOnShow stack
 280         me.layoutOnShow = Ext.create('Ext.util.MixedCollection');
 281         me.callParent();
 282         me.initItems();
 283     },
 284
 285     // @private
 286     initItems : function() {
 287         var me = this,
 288             items = me.items;
 289
 290 <span id='Ext-container-AbstractContainer-property-items'>        /**
 291 </span>         * The MixedCollection containing all the child items of this container.
 292          * @property items
 293          * @type Ext.util.MixedCollection
 294          */
 295         me.items = Ext.create('Ext.util.MixedCollection', false, me.getComponentId);
 296
 297         if (items) {
 298             if (!Ext.isArray(items)) {
 299                 items = [items];
 300             }
 301
 302             me.add(items);
 303         }
 304     },
 305
 306     // @private
 307     afterRender : function() {
 308         this.getLayout();
 309         this.callParent();
 310     },
 311
 312     // @private
 313     setLayout : function(layout) {
 314         var currentLayout = this.layout;
 315
 316         if (currentLayout &amp;&amp; currentLayout.isLayout &amp;&amp; currentLayout != layout) {
 317             currentLayout.setOwner(null);
 318         }
 319
 320         this.layout = layout;
 321         layout.setOwner(this);
 322     },
 323
 324 <span id='Ext-container-AbstractContainer-method-getLayout'>    /**
 325 </span>     * Returns the {@link Ext.layout.container.AbstractContainer layout} instance currently associated with this Container.
 326      * If a layout has not been instantiated yet, that is done first
 327      * @return {Ext.layout.container.AbstractContainer} The layout
 328      */
 329     getLayout : function() {
 330         var me = this;
 331         if (!me.layout || !me.layout.isLayout) {
 332             me.setLayout(Ext.layout.Layout.create(me.layout, 'autocontainer'));
 333         }
 334
 335         return me.layout;
 336     },
 337
 338 <span id='Ext-container-AbstractContainer-method-doLayout'>    /**
 339 </span>     * Manually force this container's layout to be recalculated.  The framwork uses this internally to refresh layouts
 340      * form most cases.
 341      * @return {Ext.container.Container} this
 342      */
 343     doLayout : function() {
 344         var me = this,
 345             layout = me.getLayout();
 346
 347         if (me.rendered &amp;&amp; layout &amp;&amp; !me.suspendLayout) {
 348             // If either dimension is being auto-set, then it requires a ComponentLayout to be run.
 349             if ((!Ext.isNumber(me.width) || !Ext.isNumber(me.height)) &amp;&amp; me.componentLayout.type !== 'autocomponent') {
 350                 // Only run the ComponentLayout if it is not already in progress
 351                 if (me.componentLayout.layoutBusy !== true) {
 352                     me.doComponentLayout();
 353                     if (me.componentLayout.layoutCancelled === true) {
 354                         layout.layout();
 355                     }
 356                 }
 357             }
 358             // Both dimensions defined, run a ContainerLayout
 359             else {
 360                 // Only run the ContainerLayout if it is not already in progress
 361                 if (layout.layoutBusy !== true) {
 362                     layout.layout();
 363                 }
 364             }
 365         }
 366
 367         return me;
 368     },
 369
 370     // @private
 371     afterLayout : function(layout) {
 372         this.fireEvent('afterlayout', this, layout);
 373     },
 374
 375     // @private
 376     prepareItems : function(items, applyDefaults) {
 377         if (!Ext.isArray(items)) {
 378             items = [items];
 379         }
 380
 381         // Make sure defaults are applied and item is initialized
 382         var i = 0,
 383             len = items.length,
 384             item;
 385
 386         for (; i &lt; len; i++) {
 387             item = items[i];
 388             if (applyDefaults) {
 389                 item = this.applyDefaults(item);
 390             }
 391             items[i] = this.lookupComponent(item);
 392         }
 393         return items;
 394     },
 395
 396     // @private
 397     applyDefaults : function(config) {
 398         var defaults = this.defaults;
 399
 400         if (defaults) {
 401             if (Ext.isFunction(defaults)) {
 402                 defaults = defaults.call(this, config);
 403             }
 404
 405             if (Ext.isString(config)) {
 406                 config = Ext.ComponentManager.get(config);
 407                 Ext.applyIf(config, defaults);
 408             } else if (!config.isComponent) {
 409                 Ext.applyIf(config, defaults);
 410             } else {
 411                 Ext.applyIf(config, defaults);
 412             }
 413         }
 414
 415         return config;
 416     },
 417
 418     // @private
 419     lookupComponent : function(comp) {
 420         return Ext.isString(comp) ? Ext.ComponentManager.get(comp) : this.createComponent(comp);
 421     },
 422
 423     // @private
 424     createComponent : function(config, defaultType) {
 425         // // add in ownerCt at creation time but then immediately
 426         // // remove so that onBeforeAdd can handle it
 427         // var component = Ext.create(Ext.apply({ownerCt: this}, config), defaultType || this.defaultType);
 428         //
 429         // delete component.initialConfig.ownerCt;
 430         // delete component.ownerCt;
 431
 432         return Ext.ComponentManager.create(config, defaultType || this.defaultType);
 433     },
 434
 435     // @private - used as the key lookup function for the items collection
 436     getComponentId : function(comp) {
 437         return comp.getItemId();
 438     },
 439
 440 <span id='Ext-container-AbstractContainer-method-add'>    /**
 441 </span>
 442 Adds {@link Ext.Component Component}(s) to this Container.
 443
 444 ##Description:##
 445
 446 - Fires the {@link #beforeadd} event before adding.
 447 - The Container's {@link #defaults default config values} will be applied
 448   accordingly (see `{@link #defaults}` for details).
 449 - Fires the `{@link #add}` event after the component has been added.
 450
 451 ##Notes:##
 452
 453 If the Container is __already rendered__ when `add`
 454 is called, it will render the newly added Component into its content area.
 455
 456 __**If**__ the Container was configured with a size-managing {@link #layout} manager, the Container
 457 will recalculate its internal layout at this time too.
 458
 459 Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing.
 460
 461 If adding multiple new child Components, pass them as an array to the `add` method, so that only one layout recalculation is performed.
 462
 463     tb = new {@link Ext.toolbar.Toolbar}({
 464         renderTo: document.body
 465     });  // toolbar is rendered
 466     tb.add([{text:'Button 1'}, {text:'Button 2'}]); // add multiple items. ({@link #defaultType} for {@link Ext.toolbar.Toolbar Toolbar} is 'button')
 467
 468 ##Warning:##
 469
 470 Components directly managed by the BorderLayout layout manager
 471 may not be removed or added.  See the Notes for {@link Ext.layout.container.Border BorderLayout}
 472 for more details.
 473
 474      * @param {...Object/Array} Component
 475      * Either one or more Components to add or an Array of Components to add.
 476      * See `{@link #items}` for additional information.
 477      *
 478      * @return {Ext.Component/Array} The Components that were added.
 479      * @markdown
 480      */
 481     add : function() {
 482         var me = this,
 483             args = Array.prototype.slice.call(arguments),
 484             hasMultipleArgs,
 485             items,
 486             results = [],
 487             i,
 488             ln,
 489             item,
 490             index = -1,
 491             cmp;
 492
 493         if (typeof args[0] == 'number') {
 494             index = args.shift();
 495         }
 496
 497         hasMultipleArgs = args.length &gt; 1;
 498         if (hasMultipleArgs || Ext.isArray(args[0])) {
 499
 500             items = hasMultipleArgs ? args : args[0];
 501             // Suspend Layouts while we add multiple items to the container
 502             me.suspendLayout = true;
 503             for (i = 0, ln = items.length; i &lt; ln; i++) {
 504                 item = items[i];
 505
 506                 //&lt;debug&gt;
 507                 if (!item) {
 508                     Ext.Error.raise(&quot;Trying to add a null item as a child of Container with itemId/id: &quot; + me.getItemId());
 509                 }
 510                 //&lt;/debug&gt;
 511
 512                 if (index != -1) {
 513                     item = me.add(index + i, item);
 514                 } else {
 515                     item = me.add(item);
 516                 }
 517                 results.push(item);
 518             }
 519             // Resume Layouts now that all items have been added and do a single layout for all the items just added
 520             me.suspendLayout = false;
 521             me.doLayout();
 522             return results;
 523         }
 524
 525         cmp = me.prepareItems(args[0], true)[0];
 526
 527         // Floating Components are not added into the items collection
 528         // But they do get an upward ownerCt link so that they can traverse
 529         // up to their z-index parent.
 530         if (cmp.floating) {
 531             cmp.onAdded(me, index);
 532         } else {
 533             index = (index !== -1) ? index : me.items.length;
 534             if (me.fireEvent('beforeadd', me, cmp, index) !== false &amp;&amp; me.onBeforeAdd(cmp) !== false) {
 535                 me.items.insert(index, cmp);
 536                 cmp.onAdded(me, index);
 537                 me.onAdd(cmp, index);
 538                 me.fireEvent('add', me, cmp, index);
 539             }
 540             me.doLayout();
 541         }
 542         return cmp;
 543     },
 544
 545 <span id='Ext-container-AbstractContainer-method-registerFloatingItem'>    /**
 546 </span>     * @private
 547      * &lt;p&gt;Called by Component#doAutoRender&lt;/p&gt;
 548      * &lt;p&gt;Register a Container configured &lt;code&gt;floating: true&lt;/code&gt; with this Container's {@link Ext.ZIndexManager ZIndexManager}.&lt;/p&gt;
 549      * &lt;p&gt;Components added in ths way will not participate in the layout, but will be rendered
 550      * upon first show in the way that {@link Ext.window.Window Window}s are.&lt;/p&gt;
 551      * &lt;p&gt;&lt;/p&gt;
 552      */
 553     registerFloatingItem: function(cmp) {
 554         var me = this;
 555         if (!me.floatingItems) {
 556             me.floatingItems = Ext.create('Ext.ZIndexManager', me);
 557         }
 558         me.floatingItems.register(cmp);
 559     },
 560
 561     onAdd : Ext.emptyFn,
 562     onRemove : Ext.emptyFn,
 563
 564 <span id='Ext-container-AbstractContainer-method-insert'>    /**
 565 </span>     * Inserts a Component into this Container at a specified index. Fires the
 566      * {@link #beforeadd} event before inserting, then fires the {@link #add} event after the
 567      * Component has been inserted.
 568      * @param {Number} index The index at which the Component will be inserted
 569      * into the Container's items collection
 570      * @param {Ext.Component} component The child Component to insert.&lt;br&gt;&lt;br&gt;
 571      * Ext uses lazy rendering, and will only render the inserted Component should
 572      * it become necessary.&lt;br&gt;&lt;br&gt;
 573      * A Component config object may be passed in order to avoid the overhead of
 574      * constructing a real Component object if lazy rendering might mean that the
 575      * inserted Component will not be rendered immediately. To take advantage of
 576      * this 'lazy instantiation', set the {@link Ext.Component#xtype} config
 577      * property to the registered type of the Component wanted.&lt;br&gt;&lt;br&gt;
 578      * For a list of all available xtypes, see {@link Ext.Component}.
 579      * @return {Ext.Component} component The Component (or config object) that was
 580      * inserted with the Container's default config values applied.
 581      */
 582     insert : function(index, comp) {
 583         return this.add(index, comp);
 584     },
 585
 586 <span id='Ext-container-AbstractContainer-method-move'>    /**
 587 </span>     * Moves a Component within the Container
 588      * @param {Number} fromIdx The index the Component you wish to move is currently at.
 589      * @param {Number} toIdx The new index for the Component.
 590      * @return {Ext.Component} component The Component (or config object) that was moved.
 591      */
 592     move : function(fromIdx, toIdx) {
 593         var items = this.items,
 594             item;
 595         item = items.removeAt(fromIdx);
 596         if (item === false) {
 597             return false;
 598         }
 599         items.insert(toIdx, item);
 600         this.doLayout();
 601         return item;
 602     },
 603
 604     // @private
 605     onBeforeAdd : function(item) {
 606         var me = this;
 607
 608         if (item.ownerCt) {
 609             item.ownerCt.remove(item, false);
 610         }
 611
 612         if (me.border === false || me.border === 0) {
 613             item.border = (item.border === true);
 614         }
 615     },
 616
 617 <span id='Ext-container-AbstractContainer-method-remove'>    /**
 618 </span>     * Removes a component from this container.  Fires the {@link #beforeremove} event before removing, then fires
 619      * the {@link #remove} event after the component has been removed.
 620      * @param {Component/String} component The component reference or id to remove.
 621      * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
 622      * Defaults to the value of this Container's {@link #autoDestroy} config.
 623      * @return {Ext.Component} component The Component that was removed.
 624      */
 625     remove : function(comp, autoDestroy) {
 626         var me = this,
 627             c = me.getComponent(comp);
 628         //&lt;debug&gt;
 629             if (Ext.isDefined(Ext.global.console) &amp;&amp; !c) {
 630                 console.warn(&quot;Attempted to remove a component that does not exist. Ext.container.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.&quot;);
 631             }
 632         //&lt;/debug&gt;
 633
 634         if (c &amp;&amp; me.fireEvent('beforeremove', me, c) !== false) {
 635             me.doRemove(c, autoDestroy);
 636             me.fireEvent('remove', me, c);
 637         }
 638
 639         return c;
 640     },
 641
 642     // @private
 643     doRemove : function(component, autoDestroy) {
 644         var me = this,
 645             layout = me.layout,
 646             hasLayout = layout &amp;&amp; me.rendered;
 647
 648         me.items.remove(component);
 649         component.onRemoved();
 650
 651         if (hasLayout) {
 652             layout.onRemove(component);
 653         }
 654
 655         me.onRemove(component, autoDestroy);
 656
 657         if (autoDestroy === true || (autoDestroy !== false &amp;&amp; me.autoDestroy)) {
 658             component.destroy();
 659         }
 660
 661         if (hasLayout &amp;&amp; !autoDestroy) {
 662             layout.afterRemove(component);
 663         }
 664
 665         if (!me.destroying) {
 666             me.doLayout();
 667         }
 668     },
 669
 670 <span id='Ext-container-AbstractContainer-method-removeAll'>    /**
 671 </span>     * Removes all components from this container.
 672      * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
 673      * Defaults to the value of this Container's {@link #autoDestroy} config.
 674      * @return {Array} Array of the destroyed components
 675      */
 676     removeAll : function(autoDestroy) {
 677         var me = this,
 678             removeItems = me.items.items.slice(),
 679             items = [],
 680             i = 0,
 681             len = removeItems.length,
 682             item;
 683
 684         // Suspend Layouts while we remove multiple items from the container
 685         me.suspendLayout = true;
 686         for (; i &lt; len; i++) {
 687             item = removeItems[i];
 688             me.remove(item, autoDestroy);
 689
 690             if (item.ownerCt !== me) {
 691                 items.push(item);
 692             }
 693         }
 694
 695         // Resume Layouts now that all items have been removed and do a single layout
 696         me.suspendLayout = false;
 697         me.doLayout();
 698         return items;
 699     },
 700
 701     // Used by ComponentQuery to retrieve all of the items
 702     // which can potentially be considered a child of this Container.
 703     // This should be overriden by components which have child items
 704     // that are not contained in items. For example dockedItems, menu, etc
 705     // IMPORTANT note for maintainers:
 706     //  Items are returned in tree traversal order. Each item is appended to the result array
 707     //  followed by the results of that child's getRefItems call.
 708     //  Floating child items are appended after internal child items.
 709     getRefItems : function(deep) {
 710         var me = this,
 711             items = me.items.items,
 712             len = items.length,
 713             i = 0,
 714             item,
 715             result = [];
 716
 717         for (; i &lt; len; i++) {
 718             item = items[i];
 719             result.push(item);
 720             if (deep &amp;&amp; item.getRefItems) {
 721                 result.push.apply(result, item.getRefItems(true));
 722             }
 723         }
 724
 725         // Append floating items to the list.
 726         // These will only be present after they are rendered.
 727         if (me.floatingItems &amp;&amp; me.floatingItems.accessList) {
 728             result.push.apply(result, me.floatingItems.accessList);
 729         }
 730
 731         return result;
 732     },
 733
 734 <span id='Ext-container-AbstractContainer-method-cascade'>    /**
 735 </span>     * Cascades down the component/container heirarchy from this component (passed in the first call), calling the specified function with
 736      * each component. The scope (&lt;code&gt;this&lt;/code&gt; reference) of the
 737      * function call will be the scope provided or the current component. The arguments to the function
 738      * will be the args provided or the current component. If the function returns false at any point,
 739      * the cascade is stopped on that branch.
 740      * @param {Function} fn The function to call
 741      * @param {Object} scope (optional) The scope of the function (defaults to current component)
 742      * @param {Array} args (optional) The args to call the function with. The current component always passed as the last argument.
 743      * @return {Ext.Container} this
 744      */
 745     cascade : function(fn, scope, origArgs){
 746         var me = this,
 747             cs = me.items ? me.items.items : [],
 748             len = cs.length,
 749             i = 0,
 750             c,
 751             args = origArgs ? origArgs.concat(me) : [me],
 752             componentIndex = args.length - 1;
 753
 754         if (fn.apply(scope || me, args) !== false) {
 755             for(; i &lt; len; i++){
 756                 c = cs[i];
 757                 if (c.cascade) {
 758                     c.cascade(fn, scope, origArgs);
 759                 } else {
 760                     args[componentIndex] = c;
 761                     fn.apply(scope || cs, args);
 762                 }
 763             }
 764         }
 765         return this;
 766     },
 767
 768 <span id='Ext-container-AbstractContainer-method-getComponent'>    /**
 769 </span>     * Examines this container's &lt;code&gt;{@link #items}&lt;/code&gt; &lt;b&gt;property&lt;/b&gt;
 770      * and gets a direct child component of this container.
 771      * @param {String/Number} comp This parameter may be any of the following:
 772      * &lt;div&gt;&lt;ul class=&quot;mdetail-params&quot;&gt;
 773      * &lt;li&gt;a &lt;b&gt;&lt;code&gt;String&lt;/code&gt;&lt;/b&gt; : representing the &lt;code&gt;{@link Ext.Component#itemId itemId}&lt;/code&gt;
 774      * or &lt;code&gt;{@link Ext.Component#id id}&lt;/code&gt; of the child component &lt;/li&gt;
 775      * &lt;li&gt;a &lt;b&gt;&lt;code&gt;Number&lt;/code&gt;&lt;/b&gt; : representing the position of the child component
 776      * within the &lt;code&gt;{@link #items}&lt;/code&gt; &lt;b&gt;property&lt;/b&gt;&lt;/li&gt;
 777      * &lt;/ul&gt;&lt;/div&gt;
 778      * &lt;p&gt;For additional information see {@link Ext.util.MixedCollection#get}.
 779      * @return Ext.Component The component (if found).
 780      */
 781     getComponent : function(comp) {
 782         if (Ext.isObject(comp)) {
 783             comp = comp.getItemId();
 784         }
 785
 786         return this.items.get(comp);
 787     },
 788
 789 <span id='Ext-container-AbstractContainer-method-query'>    /**
 790 </span>     * Retrieves all descendant components which match the passed selector.
 791      * Executes an Ext.ComponentQuery.query using this container as its root.
 792      * @param {String} selector Selector complying to an Ext.ComponentQuery selector
 793      * @return {Array} Ext.Component's which matched the selector
 794      */
 795     query : function(selector) {
 796         return Ext.ComponentQuery.query(selector, this);
 797     },
 798
 799 <span id='Ext-container-AbstractContainer-method-child'>    /**
 800 </span>     * Retrieves the first direct child of this container which matches the passed selector.
 801      * The passed in selector must comply with an Ext.ComponentQuery selector.
 802      * @param {String} selector An Ext.ComponentQuery selector
 803      * @return Ext.Component
 804      */
 805     child : function(selector) {
 806         return this.query('&gt; ' + selector)[0] || null;
 807     },
 808
 809 <span id='Ext-container-AbstractContainer-method-down'>    /**
 810 </span>     * Retrieves the first descendant of this container which matches the passed selector.
 811      * The passed in selector must comply with an Ext.ComponentQuery selector.
 812      * @param {String} selector An Ext.ComponentQuery selector
 813      * @return Ext.Component
 814      */
 815     down : function(selector) {
 816         return this.query(selector)[0] || null;
 817     },
 818
 819     // inherit docs
 820     show : function() {
 821         this.callParent(arguments);
 822         this.performDeferredLayouts();
 823         return this;
 824     },
 825
 826     // Lay out any descendant containers who queued a layout operation during the time this was hidden
 827     // This is also called by Panel after it expands because descendants of a collapsed Panel allso queue any layout ops.
 828     performDeferredLayouts: function() {
 829         var layoutCollection = this.layoutOnShow,
 830             ln = layoutCollection.getCount(),
 831             i = 0,
 832             needsLayout,
 833             item;
 834
 835         for (; i &lt; ln; i++) {
 836             item = layoutCollection.get(i);
 837             needsLayout = item.needsLayout;
 838
 839             if (Ext.isObject(needsLayout)) {
 840                 item.doComponentLayout(needsLayout.width, needsLayout.height, needsLayout.isSetSize, needsLayout.ownerCt);
 841             }
 842         }
 843         layoutCollection.clear();
 844     },
 845
 846     //@private
 847     // Enable all immediate children that was previously disabled
 848     onEnable: function() {
 849         Ext.Array.each(this.query('[isFormField]'), function(item) {
 850             if (item.resetDisable) {
 851                 item.enable();
 852                 delete item.resetDisable;
 853             }
 854         });
 855         this.callParent();
 856     },
 857
 858     // @private
 859     // Disable all immediate children that was previously disabled
 860     onDisable: function() {
 861         Ext.Array.each(this.query('[isFormField]'), function(item) {
 862             if (item.resetDisable !== false &amp;&amp; !item.disabled) {
 863                 item.disable();
 864                 item.resetDisable = true;
 865             }
 866         });
 867         this.callParent();
 868     },
 869
 870 <span id='Ext-container-AbstractContainer-method-beforeLayout'>    /**
 871 </span>     * Occurs before componentLayout is run. Returning false from this method will prevent the containerLayout
 872      * from being executed.
 873      */
 874     beforeLayout: function() {
 875         return true;
 876     },
 877
 878     // @private
 879     beforeDestroy : function() {
 880         var me = this,
 881             items = me.items,
 882             c;
 883
 884         if (items) {
 885             while ((c = items.first())) {
 886                 me.doRemove(c, true);
 887             }
 888         }
 889
 890         Ext.destroy(
 891             me.layout,
 892             me.floatingItems
 893         );
 894         me.callParent();
 895     }
 896 });</pre>
 897 </body>
 898 </html>