docs/source/AbstractContainer.html

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