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