docs/source/Container.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.Container"></div>/**\r
  15  * @class Ext.Container\r
  16  * @extends Ext.BoxComponent\r
  17  * <p>Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the\r
  18  * basic behavior of containing items, namely adding, inserting and removing items.</p>\r
  19  *\r
  20  * <p>The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}.\r
  21  * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight\r
  22  * Container to be encapsulated by an HTML element to your specifications by using the\r
  23  * <tt><b>{@link Ext.Component#autoEl autoEl}</b></tt> config option. This is a useful technique when creating\r
  24  * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels}\r
  25  * for example.</p>\r
  26  *\r
  27  * <p>The code below illustrates both how to explicitly create a Container, and how to implicitly\r
  28  * create one using the <b><tt>'container'</tt></b> xtype:<pre><code>\r
  29 // explicitly create a Container\r
  30 var embeddedColumns = new Ext.Container({\r
  31     autoEl: 'div',  // This is the default\r
  32     layout: 'column',\r
  33     defaults: {\r
  34         // implicitly create Container by specifying xtype\r
  35         xtype: 'container',\r
  36         autoEl: 'div', // This is the default.\r
  37         layout: 'form',\r
  38         columnWidth: 0.5,\r
  39         style: {\r
  40             padding: '10px'\r
  41         }\r
  42     },\r
  43 //  The two items below will be Ext.Containers, each encapsulated by a &lt;DIV> element.\r
  44     items: [{\r
  45         items: {\r
  46             xtype: 'datefield',\r
  47             name: 'startDate',\r
  48             fieldLabel: 'Start date'\r
  49         }\r
  50     }, {\r
  51         items: {\r
  52             xtype: 'datefield',\r
  53             name: 'endDate',\r
  54             fieldLabel: 'End date'\r
  55         }\r
  56     }]\r
  57 });</code></pre></p>\r
  58  *\r
  59  * <p><u><b>Layout</b></u></p>\r
  60  * <p>Container classes delegate the rendering of child Components to a layout\r
  61  * manager class which must be configured into the Container using the\r
  62  * <code><b>{@link #layout}</b></code> configuration property.</p>\r
  63  * <p>When either specifying child <code>{@link #items}</code> of a Container,\r
  64  * or dynamically {@link #add adding} Components to a Container, remember to\r
  65  * consider how you wish the Container to arrange those child elements, and\r
  66  * whether those child elements need to be sized using one of Ext's built-in\r
  67  * <b><code>{@link #layout}</code></b> schemes. By default, Containers use the\r
  68  * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only\r
  69  * renders child components, appending them one after the other inside the\r
  70  * Container, and <b>does not apply any sizing</b> at all.</p>\r
  71  * <p>A common mistake is when a developer neglects to specify a\r
  72  * <b><code>{@link #layout}</code></b> (e.g. widgets like GridPanels or\r
  73  * TreePanels are added to Containers for which no <tt><b>{@link #layout}</b></tt>\r
  74  * has been specified). If a Container is left to use the default\r
  75  * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its\r
  76  * child components will be resized, or changed in any way when the Container\r
  77  * is resized.</p>\r
  78  * <p>Certain layout managers allow dynamic addition of child components.\r
  79  * Those that do include {@link Ext.layout.CardLayout},\r
  80  * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and\r
  81  * {@link Ext.layout.TableLayout}. For example:<pre><code>\r
  82 //  Create the GridPanel.\r
  83 var myNewGrid = new Ext.grid.GridPanel({\r
  84     store: myStore,\r
  85     columns: myColumnModel,\r
  86     title: 'Results', // the title becomes the title of the tab\r
  87 });\r
  88 \r
  89 myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout}\r
  90 myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid);\r
  91  * </code></pre></p>\r
  92  * <p>The example above adds a newly created GridPanel to a TabPanel. Note that\r
  93  * a TabPanel uses {@link Ext.layout.CardLayout} as its layout manager which\r
  94  * means all its child items are sized to {@link Ext.layout.FitLayout fit}\r
  95  * exactly into its client area.\r
  96  * <p><b><u>Overnesting is a common problem</u></b>.\r
  97  * An example of overnesting occurs when a GridPanel is added to a TabPanel\r
  98  * by wrapping the GridPanel <i>inside</i> a wrapping Panel (that has no\r
  99  * <tt><b>{@link #layout}</b></tt> specified) and then add that wrapping Panel\r
 100  * to the TabPanel. The point to realize is that a GridPanel <b>is</b> a\r
 101  * Component which can be added directly to a Container. If the wrapping Panel\r
 102  * has no <tt><b>{@link #layout}</b></tt> configuration, then the overnested\r
 103  * GridPanel will not be sized as expected.<p>\r
 104  *\r
 105  * <p><u><b>Adding via remote configuration</b></u></p>\r
 106  *\r
 107  * <p>A server side script can be used to add Components which are generated dynamically on the server.\r
 108  * An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server\r
 109  * based on certain parameters:\r
 110  * </p><pre><code>\r
 111 // execute an Ajax request to invoke server side script:\r
 112 Ext.Ajax.request({\r
 113     url: 'gen-invoice-grid.php',\r
 114     // send additional parameters to instruct server script\r
 115     params: {\r
 116         startDate: Ext.getCmp('start-date').getValue(),\r
 117         endDate: Ext.getCmp('end-date').getValue()\r
 118     },\r
 119     // process the response object to add it to the TabPanel:\r
 120     success: function(xhr) {\r
 121         var newComponent = eval(xhr.responseText); // see discussion below\r
 122         myTabPanel.add(newComponent); // add the component to the TabPanel\r
 123         myTabPanel.setActiveTab(newComponent);\r
 124     },\r
 125     failure: function() {\r
 126         Ext.Msg.alert("Grid create failed", "Server communication failure");\r
 127     }\r
 128 });\r
 129 </code></pre>\r
 130  * <p>The server script needs to return an executable Javascript statement which, when processed\r
 131  * using <tt>eval()</tt>, will return either a config object with an {@link Ext.Component#xtype xtype},\r
 132  * or an instantiated Component. The server might return this for example:</p><pre><code>\r
 133 (function() {\r
 134     function formatDate(value){\r
 135         return value ? value.dateFormat('M d, Y') : '';\r
 136     };\r
 137 \r
 138     var store = new Ext.data.Store({\r
 139         url: 'get-invoice-data.php',\r
 140         baseParams: {\r
 141             startDate: '01/01/2008',\r
 142             endDate: '01/31/2008'\r
 143         },\r
 144         reader: new Ext.data.JsonReader({\r
 145             record: 'transaction',\r
 146             idProperty: 'id',\r
 147             totalRecords: 'total'\r
 148         }, [\r
 149            'customer',\r
 150            'invNo',\r
 151            {name: 'date', type: 'date', dateFormat: 'm/d/Y'},\r
 152            {name: 'value', type: 'float'}\r
 153         ])\r
 154     });\r
 155 \r
 156     var grid = new Ext.grid.GridPanel({\r
 157         title: 'Invoice Report',\r
 158         bbar: new Ext.PagingToolbar(store),\r
 159         store: store,\r
 160         columns: [\r
 161             {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},\r
 162             {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},\r
 163             {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},\r
 164             {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}\r
 165         ],\r
 166     });\r
 167     store.load();\r
 168     return grid;  // return instantiated component\r
 169 })();\r
 170 </code></pre>\r
 171  * <p>When the above code fragment is passed through the <tt>eval</tt> function in the success handler\r
 172  * of the Ajax request, the code is executed by the Javascript processor, and the anonymous function\r
 173  * runs, and returns the instantiated grid component.</p>\r
 174  * <p>Note: since the code above is <i>generated</i> by a server script, the <tt>baseParams</tt> for\r
 175  * the Store, the metadata to allow generation of the Record layout, and the ColumnModel\r
 176  * can all be generated into the code since these are all known on the server.</p>\r
 177  *\r
 178  * @xtype container\r
 179  */\r
 180 Ext.Container = Ext.extend(Ext.BoxComponent, {\r
 181     <div id="cfg-Ext.Container-monitorResize"></div>/**\r
 182      * @cfg {Boolean} monitorResize\r
 183      * True to automatically monitor window resize events to handle anything that is sensitive to the current size\r
 184      * of the viewport.  This value is typically managed by the chosen <code>{@link #layout}</code> and should not need\r
 185      * to be set manually.\r
 186      */\r
 187     <div id="cfg-Ext.Container-layout"></div>/**\r
 188      * @cfg {String/Object} layout\r
 189      * <p><b>*Important</b>: In order for child items to be correctly sized and\r
 190      * positioned, typically a layout manager <b>must</b> be specified through\r
 191      * the <code>layout</code> configuration option.</p>\r
 192      * <br><p>The sizing and positioning of child {@link items} is the responsibility of\r
 193      * the Container's layout manager which creates and manages the type of layout\r
 194      * you have in mind.  For example:</p><pre><code>\r
 195 new Ext.Window({\r
 196     width:300, height: 300,\r
 197     layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')\r
 198     items: [{\r
 199         title: 'Panel inside a Window'\r
 200     }]\r
 201 }).show();\r
 202      * </code></pre>\r
 203      * <p>If the {@link #layout} configuration is not explicitly specified for\r
 204      * a general purpose container (e.g. Container or Panel) the\r
 205      * {@link Ext.layout.ContainerLayout default layout manager} will be used\r
 206      * which does nothing but render child components sequentially into the\r
 207      * Container (no sizing or positioning will be performed in this situation).\r
 208      * Some container classes implicitly specify a default layout\r
 209      * (e.g. FormPanel specifies <code>layout:'form'</code>). Other specific\r
 210      * purpose classes internally specify/manage their internal layout (e.g.\r
 211      * GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).</p>\r
 212      * <br><p><b><code>layout</code></b> may be specified as either as an Object or\r
 213      * as a String:</p><div><ul class="mdetail-params">\r
 214      *\r
 215      * <li><u>Specify as an Object</u></li>\r
 216      * <div><ul class="mdetail-params">\r
 217      * <li>Example usage:</li>\r
 218 <pre><code>\r
 219 layout: {\r
 220     type: 'vbox',\r
 221     padding: '5',\r
 222     align: 'left'\r
 223 }\r
 224 </code></pre>\r
 225      *\r
 226      * <li><tt><b>type</b></tt></li>\r
 227      * <br/><p>The layout type to be used for this container.  If not specified,\r
 228      * a default {@link Ext.layout.ContainerLayout} will be created and used.</p>\r
 229      * <br/><p>Valid layout <tt>type</tt> values are:</p>\r
 230      * <div class="sub-desc"><ul class="mdetail-params">\r
 231      * <li><tt><b>{@link Ext.layout.AbsoluteLayout absolute}</b></tt></li>\r
 232      * <li><tt><b>{@link Ext.layout.AccordionLayout accordion}</b></tt></li>\r
 233      * <li><tt><b>{@link Ext.layout.AnchorLayout anchor}</b></tt></li>\r
 234      * <li><tt><b>{@link Ext.layout.ContainerLayout auto}</b></tt> &nbsp;&nbsp;&nbsp; <b>Default</b></li>\r
 235      * <li><tt><b>{@link Ext.layout.BorderLayout border}</b></tt></li>\r
 236      * <li><tt><b>{@link Ext.layout.CardLayout card}</b></tt></li>\r
 237      * <li><tt><b>{@link Ext.layout.ColumnLayout column}</b></tt></li>\r
 238      * <li><tt><b>{@link Ext.layout.FitLayout fit}</b></tt></li>\r
 239      * <li><tt><b>{@link Ext.layout.FormLayout form}</b></tt></li>\r
 240      * <li><tt><b>{@link Ext.layout.HBoxLayout hbox}</b></tt></li>\r
 241      * <li><tt><b>{@link Ext.layout.MenuLayout menu}</b></tt></li>\r
 242      * <li><tt><b>{@link Ext.layout.TableLayout table}</b></tt></li>\r
 243      * <li><tt><b>{@link Ext.layout.ToolbarLayout toolbar}</b></tt></li>\r
 244      * <li><tt><b>{@link Ext.layout.VBoxLayout vbox}</b></tt></li>\r
 245      * </ul></div>\r
 246      *\r
 247      * <li>Layout specific configuration properties</li>\r
 248      * <br/><p>Additional layout specific configuration properties may also be\r
 249      * specified. For complete details regarding the valid config options for\r
 250      * each layout type, see the layout class corresponding to the <tt>type</tt>\r
 251      * specified.</p>\r
 252      *\r
 253      * </ul></div>\r
 254      *\r
 255      * <li><u>Specify as a String</u></li>\r
 256      * <div><ul class="mdetail-params">\r
 257      * <li>Example usage:</li>\r
 258 <pre><code>\r
 259 layout: 'vbox',\r
 260 layoutConfig: {\r
 261     padding: '5',\r
 262     align: 'left'\r
 263 }\r
 264 </code></pre>\r
 265      * <li><tt><b>layout</b></tt></li>\r
 266      * <br/><p>The layout <tt>type</tt> to be used for this container (see list\r
 267      * of valid layout type values above).</p><br/>\r
 268      * <li><tt><b>{@link #layoutConfig}</b></tt></li>\r
 269      * <br/><p>Additional layout specific configuration properties. For complete\r
 270      * details regarding the valid config options for each layout type, see the\r
 271      * layout class corresponding to the <tt>layout</tt> specified.</p>\r
 272      * </ul></div></ul></div>\r
 273      */\r
 274     <div id="cfg-Ext.Container-layoutConfig"></div>/**\r
 275      * @cfg {Object} layoutConfig\r
 276      * This is a config object containing properties specific to the chosen\r
 277      * <b><code>{@link #layout}</code></b> if <b><code>{@link #layout}</code></b>\r
 278      * has been specified as a <i>string</i>.</p>\r
 279      */\r
 280     <div id="cfg-Ext.Container-bufferResize"></div>/**\r
 281      * @cfg {Boolean/Number} bufferResize\r
 282      * When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer\r
 283      * the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers\r
 284      * with a large quantity of sub-components for which frequent layout calls would be expensive. Defaults to <tt>50</tt>.\r
 285      */\r
 286     bufferResize: 50,\r
 287 \r
 288     <div id="cfg-Ext.Container-activeItem"></div>/**\r
 289      * @cfg {String/Number} activeItem\r
 290      * A string component id or the numeric index of the component that should be initially activated within the\r
 291      * container's layout on render.  For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first\r
 292      * item in the container's collection).  activeItem only applies to layout styles that can display\r
 293      * items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and\r
 294      * {@link Ext.layout.FitLayout}).  Related to {@link Ext.layout.ContainerLayout#activeItem}.\r
 295      */\r
 296     <div id="cfg-Ext.Container-items"></div>/**\r
 297      * @cfg {Object/Array} items\r
 298      * <pre><b>** IMPORTANT</b>: be sure to <b>{@link #layout specify a <code>layout</code>} if needed ! **</b></pre>\r
 299      * <p>A single item, or an array of child Components to be added to this container,\r
 300      * for example:</p>\r
 301      * <pre><code>\r
 302 // specifying a single item\r
 303 items: {...},\r
 304 layout: 'fit',    // specify a layout!\r
 305 \r
 306 // specifying multiple items\r
 307 items: [{...}, {...}],\r
 308 layout: 'anchor', // specify a layout!\r
 309      * </code></pre>\r
 310      * <p>Each item may be:</p>\r
 311      * <div><ul class="mdetail-params">\r
 312      * <li>any type of object based on {@link Ext.Component}</li>\r
 313      * <li>a fully instanciated object or</li>\r
 314      * <li>an object literal that:</li>\r
 315      * <div><ul class="mdetail-params">\r
 316      * <li>has a specified <code>{@link Ext.Component#xtype xtype}</code></li>\r
 317      * <li>the {@link Ext.Component#xtype} specified is associated with the Component\r
 318      * desired and should be chosen from one of the available xtypes as listed\r
 319      * in {@link Ext.Component}.</li>\r
 320      * <li>If an <code>{@link Ext.Component#xtype xtype}</code> is not explicitly\r
 321      * specified, the {@link #defaultType} for that Container is used.</li>\r
 322      * <li>will be "lazily instanciated", avoiding the overhead of constructing a fully\r
 323      * instanciated Component object</li>\r
 324      * </ul></div></ul></div>\r
 325      * <p><b>Notes</b>:</p>\r
 326      * <div><ul class="mdetail-params">\r
 327      * <li>Ext uses lazy rendering. Child Components will only be rendered\r
 328      * should it become necessary. Items are automatically laid out when they are first\r
 329      * shown (no sizing is done while hidden), or in response to a {@link #doLayout} call.</li>\r
 330      * <li>Do not specify <code>{@link Ext.Panel#contentEl contentEl}</code>/\r
 331      * <code>{@link Ext.Panel#html html}</code> with <code>items</code>.</li>\r
 332      * </ul></div>\r
 333      */\r
 334     <div id="cfg-Ext.Container-defaults"></div>/**\r
 335      * @cfg {Object} defaults\r
 336      * <p>A config object that will be applied to all components added to this container either via the {@link #items}\r
 337      * config or via the {@link #add} or {@link #insert} methods.  The <tt>defaults</tt> config can contain any\r
 338      * number of name/value property pairs to be added to each item, and should be valid for the types of items\r
 339      * being added to the container.  For example, to automatically apply padding to the body of each of a set of\r
 340      * contained {@link Ext.Panel} items, you could pass: <tt>defaults: {bodyStyle:'padding:15px'}</tt>.</p><br/>\r
 341      * <p><b>Note</b>: <tt>defaults</tt> will not be applied to config objects if the option is already specified.\r
 342      * For example:</p><pre><code>\r
 343 defaults: {               // defaults are applied to items, not the container\r
 344     autoScroll:true\r
 345 },\r
 346 items: [\r
 347     {\r
 348         xtype: 'panel',   // defaults <b>do not</b> have precedence over\r
 349         id: 'panel1',     // options in config objects, so the defaults\r
 350         autoScroll: false // will not be applied here, panel1 will be autoScroll:false\r
 351     },\r
 352     new Ext.Panel({       // defaults <b>do</b> have precedence over options\r
 353         id: 'panel2',     // options in components, so the defaults\r
 354         autoScroll: false // will be applied here, panel2 will be autoScroll:true.\r
 355     })\r
 356 ]\r
 357      * </code></pre>\r
 358      */\r
 359 \r
 360 \r
 361     <div id="cfg-Ext.Container-autoDestroy"></div>/** @cfg {Boolean} autoDestroy\r
 362      * If true the container will automatically destroy any contained component that is removed from it, else\r
 363      * destruction must be handled manually (defaults to true).\r
 364      */\r
 365     autoDestroy : true,\r
 366 \r
 367     <div id="cfg-Ext.Container-forceLayout"></div>/** @cfg {Boolean} forceLayout\r
 368      * If true the container will force a layout initially even if hidden or collapsed. This option\r
 369      * is useful for forcing forms to render in collapsed or hidden containers. (defaults to false).\r
 370      */\r
 371     forceLayout: false,\r
 372 \r
 373     <div id="cfg-Ext.Container-hideBorders"></div>/** @cfg {Boolean} hideBorders\r
 374      * True to hide the borders of each contained component, false to defer to the component's existing\r
 375      * border settings (defaults to false).\r
 376      */\r
 377     <div id="cfg-Ext.Container-defaultType"></div>/** @cfg {String} defaultType\r
 378      * <p>The default {@link Ext.Component xtype} of child Components to create in this Container when\r
 379      * a child item is specified as a raw configuration object, rather than as an instantiated Component.</p>\r
 380      * <p>Defaults to <tt>'panel'</tt>, except {@link Ext.menu.Menu} which defaults to <tt>'menuitem'</tt>,\r
 381      * and {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which default to <tt>'button'</tt>.</p>\r
 382      */\r
 383     defaultType : 'panel',\r
 384 \r
 385     <div id="cfg-Ext.Container-resizeEvent"></div>/** @cfg {String} resizeEvent\r
 386      * The event to listen to for resizing in layouts. Defaults to <tt>'resize'</tt>.\r
 387      */\r
 388     resizeEvent: 'resize',\r
 389     \r
 390     <div id="cfg-Ext.Container-bubbleEvents"></div>/**\r
 391      * @cfg {Array} bubbleEvents\r
 392      * <p>An array of events that, when fired, should be bubbled to any parent container.\r
 393      * Defaults to <tt>['add', 'remove']</tt>.\r
 394      */\r
 395     bubbleEvents: ['add', 'remove'],\r
 396 \r
 397     // private\r
 398     initComponent : function(){\r
 399         Ext.Container.superclass.initComponent.call(this);\r
 400 \r
 401         this.addEvents(\r
 402             <div id="event-Ext.Container-afterlayout"></div>/**\r
 403              * @event afterlayout\r
 404              * Fires when the components in this container are arranged by the associated layout manager.\r
 405              * @param {Ext.Container} this\r
 406              * @param {ContainerLayout} layout The ContainerLayout implementation for this container\r
 407              */\r
 408             'afterlayout',\r
 409             <div id="event-Ext.Container-beforeadd"></div>/**\r
 410              * @event beforeadd\r
 411              * Fires before any {@link Ext.Component} is added or inserted into the container.\r
 412              * A handler can return false to cancel the add.\r
 413              * @param {Ext.Container} this\r
 414              * @param {Ext.Component} component The component being added\r
 415              * @param {Number} index The index at which the component will be added to the container's items collection\r
 416              */\r
 417             'beforeadd',\r
 418             <div id="event-Ext.Container-beforeremove"></div>/**\r
 419              * @event beforeremove\r
 420              * Fires before any {@link Ext.Component} is removed from the container.  A handler can return\r
 421              * false to cancel the remove.\r
 422              * @param {Ext.Container} this\r
 423              * @param {Ext.Component} component The component being removed\r
 424              */\r
 425             'beforeremove',\r
 426             <div id="event-Ext.Container-add"></div>/**\r
 427              * @event add\r
 428              * @bubbles\r
 429              * Fires after any {@link Ext.Component} is added or inserted into the container.\r
 430              * @param {Ext.Container} this\r
 431              * @param {Ext.Component} component The component that was added\r
 432              * @param {Number} index The index at which the component was added to the container's items collection\r
 433              */\r
 434             'add',\r
 435             <div id="event-Ext.Container-remove"></div>/**\r
 436              * @event remove\r
 437              * @bubbles\r
 438              * Fires after any {@link Ext.Component} is removed from the container.\r
 439              * @param {Ext.Container} this\r
 440              * @param {Ext.Component} component The component that was removed\r
 441              */\r
 442             'remove'\r
 443         );\r
 444 \r
 445         this.enableBubble(this.bubbleEvents);\r
 446 \r
 447         <div id="prop-Ext.Container-items"></div>/**\r
 448          * The collection of components in this container as a {@link Ext.util.MixedCollection}\r
 449          * @type MixedCollection\r
 450          * @property items\r
 451          */\r
 452         var items = this.items;\r
 453         if(items){\r
 454             delete this.items;\r
 455             this.add(items);\r
 456         }\r
 457     },\r
 458 \r
 459     // private\r
 460     initItems : function(){\r
 461         if(!this.items){\r
 462             this.items = new Ext.util.MixedCollection(false, this.getComponentId);\r
 463             this.getLayout(); // initialize the layout\r
 464         }\r
 465     },\r
 466 \r
 467     // private\r
 468     setLayout : function(layout){\r
 469         if(this.layout && this.layout != layout){\r
 470             this.layout.setContainer(null);\r
 471         }\r
 472         this.initItems();\r
 473         this.layout = layout;\r
 474         layout.setContainer(this);\r
 475     },\r
 476 \r
 477     afterRender: function(){\r
 478         Ext.Container.superclass.afterRender.call(this);\r
 479         if(!this.layout){\r
 480             this.layout = 'auto';\r
 481         }\r
 482         if(Ext.isObject(this.layout) && !this.layout.layout){\r
 483             this.layoutConfig = this.layout;\r
 484             this.layout = this.layoutConfig.type;\r
 485         }\r
 486         if(Ext.isString(this.layout)){\r
 487             this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);\r
 488         }\r
 489         this.setLayout(this.layout);\r
 490 \r
 491         if(this.activeItem !== undefined){\r
 492             var item = this.activeItem;\r
 493             delete this.activeItem;\r
 494             this.layout.setActiveItem(item);\r
 495         }\r
 496         if(!this.ownerCt){\r
 497             // force a layout if no ownerCt is set\r
 498             this.doLayout(false, true);\r
 499         }\r
 500         if(this.monitorResize === true){\r
 501             Ext.EventManager.onWindowResize(this.doLayout, this, [false]);\r
 502         }\r
 503     },\r
 504 \r
 505     <div id="method-Ext.Container-getLayoutTarget"></div>/**\r
 506      * <p>Returns the Element to be used to contain the child Components of this Container.</p>\r
 507      * <p>An implementation is provided which returns the Container's {@link #getEl Element}, but\r
 508      * if there is a more complex structure to a Container, this may be overridden to return\r
 509      * the element into which the {@link #layout layout} renders child Components.</p>\r
 510      * @return {Ext.Element} The Element to render child Components into.\r
 511      */\r
 512     getLayoutTarget : function(){\r
 513         return this.el;\r
 514     },\r
 515 \r
 516     // private - used as the key lookup function for the items collection\r
 517     getComponentId : function(comp){\r
 518         return comp.getItemId();\r
 519     },\r
 520 \r
 521     <div id="method-Ext.Container-add"></div>/**\r
 522      * <p>Adds {@link Ext.Component Component}(s) to this Container.</p>\r
 523      * <br><p><b>Description</b></u> :\r
 524      * <div><ul class="mdetail-params">\r
 525      * <li>Fires the {@link #beforeadd} event before adding</li>\r
 526      * <li>The Container's {@link #defaults default config values} will be applied\r
 527      * accordingly (see <code>{@link #defaults}</code> for details).</li>\r
 528      * <li>Fires the {@link #add} event after the component has been added.</li>\r
 529      * </ul></div>\r
 530      * <br><p><b>Notes</b></u> :\r
 531      * <div><ul class="mdetail-params">\r
 532      * <li>If the Container is <i>already rendered</i> when <tt>add</tt>\r
 533      * is called, you may need to call {@link #doLayout} to refresh the view which causes\r
 534      * any unrendered child Components to be rendered. This is required so that you can\r
 535      * <tt>add</tt> multiple child components if needed while only refreshing the layout\r
 536      * once. For example:<pre><code>\r
 537 var tb = new {@link Ext.Toolbar}();\r
 538 tb.render(document.body);  // toolbar is rendered\r
 539 tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button')\r
 540 tb.add({text:'Button 2'});\r
 541 tb.{@link #doLayout}();             // refresh the layout\r
 542      * </code></pre></li>\r
 543      * <li><i>Warning:</i> Containers directly managed by the BorderLayout layout manager\r
 544      * may not be removed or added.  See the Notes for {@link Ext.layout.BorderLayout BorderLayout}\r
 545      * for more details.</li>\r
 546      * </ul></div>\r
 547      * @param {Object/Array} component\r
 548      * <p>Either a single component or an Array of components to add.  See\r
 549      * <code>{@link #items}</code> for additional information.</p>\r
 550      * @param {Object} (Optional) component_2\r
 551      * @param {Object} (Optional) component_n\r
 552      * @return {Ext.Component} component The Component (or config object) that was added.\r
 553      */\r
 554     add : function(comp){\r
 555         this.initItems();\r
 556         var args = arguments.length > 1;\r
 557         if(args || Ext.isArray(comp)){\r
 558             Ext.each(args ? arguments : comp, function(c){\r
 559                 this.add(c);\r
 560             }, this);\r
 561             return;\r
 562         }\r
 563         var c = this.lookupComponent(this.applyDefaults(comp));\r
 564         var pos = this.items.length;\r
 565         if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){\r
 566             this.items.add(c);\r
 567             c.ownerCt = this;\r
 568             this.onAdd(c);\r
 569             this.fireEvent('add', this, c, pos);\r
 570         }\r
 571         return c;\r
 572     },\r
 573 \r
 574     onAdd : function(c){\r
 575         // Empty template method\r
 576     },\r
 577 \r
 578     <div id="method-Ext.Container-insert"></div>/**\r
 579      * Inserts a Component into this Container at a specified index. Fires the\r
 580      * {@link #beforeadd} event before inserting, then fires the {@link #add} event after the\r
 581      * Component has been inserted.\r
 582      * @param {Number} index The index at which the Component will be inserted\r
 583      * into the Container's items collection\r
 584      * @param {Ext.Component} component The child Component to insert.<br><br>\r
 585      * Ext uses lazy rendering, and will only render the inserted Component should\r
 586      * it become necessary.<br><br>\r
 587      * A Component config object may be passed in order to avoid the overhead of\r
 588      * constructing a real Component object if lazy rendering might mean that the\r
 589      * inserted Component will not be rendered immediately. To take advantage of\r
 590      * this 'lazy instantiation', set the {@link Ext.Component#xtype} config\r
 591      * property to the registered type of the Component wanted.<br><br>\r
 592      * For a list of all available xtypes, see {@link Ext.Component}.\r
 593      * @return {Ext.Component} component The Component (or config object) that was\r
 594      * inserted with the Container's default config values applied.\r
 595      */\r
 596     insert : function(index, comp){\r
 597         this.initItems();\r
 598         var a = arguments, len = a.length;\r
 599         if(len > 2){\r
 600             for(var i = len-1; i >= 1; --i) {\r
 601                 this.insert(index, a[i]);\r
 602             }\r
 603             return;\r
 604         }\r
 605         var c = this.lookupComponent(this.applyDefaults(comp));\r
 606         index = Math.min(index, this.items.length);\r
 607         if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){\r
 608             if(c.ownerCt == this){\r
 609                 this.items.remove(c);\r
 610             }\r
 611             this.items.insert(index, c);\r
 612             c.ownerCt = this;\r
 613             this.onAdd(c);\r
 614             this.fireEvent('add', this, c, index);\r
 615         }\r
 616         return c;\r
 617     },\r
 618 \r
 619     // private\r
 620     applyDefaults : function(c){\r
 621         if(this.defaults){\r
 622             if(Ext.isString(c)){\r
 623                 c = Ext.ComponentMgr.get(c);\r
 624                 Ext.apply(c, this.defaults);\r
 625             }else if(!c.events){\r
 626                 Ext.applyIf(c, this.defaults);\r
 627             }else{\r
 628                 Ext.apply(c, this.defaults);\r
 629             }\r
 630         }\r
 631         return c;\r
 632     },\r
 633 \r
 634     // private\r
 635     onBeforeAdd : function(item){\r
 636         if(item.ownerCt){\r
 637             item.ownerCt.remove(item, false);\r
 638         }\r
 639         if(this.hideBorders === true){\r
 640             item.border = (item.border === true);\r
 641         }\r
 642     },\r
 643 \r
 644     <div id="method-Ext.Container-remove"></div>/**\r
 645      * Removes a component from this container.  Fires the {@link #beforeremove} event before removing, then fires\r
 646      * the {@link #remove} event after the component has been removed.\r
 647      * @param {Component/String} component The component reference or id to remove.\r
 648      * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.\r
 649      * Defaults to the value of this Container's {@link #autoDestroy} config.\r
 650      * @return {Ext.Component} component The Component that was removed.\r
 651      */\r
 652     remove : function(comp, autoDestroy){\r
 653         this.initItems();\r
 654         var c = this.getComponent(comp);\r
 655         if(c && this.fireEvent('beforeremove', this, c) !== false){\r
 656             delete c.ownerCt;\r
 657             if(this.layout && this.rendered){\r
 658                 this.layout.onRemove(c);\r
 659             }\r
 660             this.onRemove(c);\r
 661             this.items.remove(c);\r
 662             if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){\r
 663                 c.destroy();\r
 664             }\r
 665             this.fireEvent('remove', this, c);\r
 666         }\r
 667         return c;\r
 668     },\r
 669 \r
 670     onRemove: function(c){\r
 671         // Empty template method\r
 672     },\r
 673 \r
 674     <div id="method-Ext.Container-removeAll"></div>/**\r
 675      * Removes all components from this container.\r
 676      * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.\r
 677      * Defaults to the value of this Container's {@link #autoDestroy} config.\r
 678      * @return {Array} Array of the destroyed components\r
 679      */\r
 680     removeAll: function(autoDestroy){\r
 681         this.initItems();\r
 682         var item, rem = [], items = [];\r
 683         this.items.each(function(i){\r
 684             rem.push(i);\r
 685         });\r
 686         for (var i = 0, len = rem.length; i < len; ++i){\r
 687             item = rem[i];\r
 688             this.remove(item, autoDestroy);\r
 689             if(item.ownerCt !== this){\r
 690                 items.push(item);\r
 691             }\r
 692         }\r
 693         return items;\r
 694     },\r
 695 \r
 696     <div id="method-Ext.Container-getComponent"></div>/**\r
 697      * Examines this container's <code>{@link #items}</code> <b>property</b>\r
 698      * and gets a direct child component of this container.\r
 699      * @param {String/Number} comp This parameter may be any of the following:\r
 700      * <div><ul class="mdetail-params">\r
 701      * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>\r
 702      * or <code>{@link Ext.Component#id id}</code> of the child component </li>\r
 703      * <li>a <b><tt>Number</tt></b> : representing the position of the child component\r
 704      * within the <code>{@link #items}</code> <b>property</b></li>\r
 705      * </ul></div>\r
 706      * <p>For additional information see {@link Ext.util.MixedCollection#get}.\r
 707      * @return Ext.Component The component (if found).\r
 708      */\r
 709     getComponent : function(comp){\r
 710         if(Ext.isObject(comp)){\r
 711             comp = comp.getItemId();\r
 712         }\r
 713         return this.items.get(comp);\r
 714     },\r
 715 \r
 716     // private\r
 717     lookupComponent : function(comp){\r
 718         if(Ext.isString(comp)){\r
 719             return Ext.ComponentMgr.get(comp);\r
 720         }else if(!comp.events){\r
 721             return this.createComponent(comp);\r
 722         }\r
 723         return comp;\r
 724     },\r
 725 \r
 726     // private\r
 727     createComponent : function(config){\r
 728         return Ext.create(config, this.defaultType);\r
 729     },\r
 730 \r
 731     // private\r
 732     canLayout: function() {\r
 733         var el = this.getVisibilityEl();\r
 734         return el && !el.isStyle("display", "none");\r
 735     },\r
 736 \r
 737 \r
 738     <div id="method-Ext.Container-doLayout"></div>/**\r
 739      * Force this container's layout to be recalculated. A call to this function is required after adding a new component\r
 740      * to an already rendered container, or possibly after changing sizing/position properties of child components.\r
 741      * @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto\r
 742      * calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer)\r
 743      * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden.\r
 744      * @return {Ext.Container} this\r
 745      */\r
 746     doLayout: function(shallow, force){\r
 747         var rendered = this.rendered;\r
 748         forceLayout = force || this.forceLayout;\r
 749 \r
 750         if(!this.canLayout() || this.collapsed){\r
 751             this.deferLayout = this.deferLayout || !shallow;\r
 752             if(!forceLayout){\r
 753                 return;\r
 754             }\r
 755             shallow = shallow && !this.deferLayout;\r
 756         } else {\r
 757             delete this.deferLayout;\r
 758         }\r
 759         if(rendered && this.layout){\r
 760             this.layout.layout();\r
 761         }\r
 762         if(shallow !== true && this.items){\r
 763             var cs = this.items.items;\r
 764             for(var i = 0, len = cs.length; i < len; i++){\r
 765                 var c = cs[i];\r
 766                 if(c.doLayout){\r
 767                     c.doLayout(false, forceLayout);\r
 768                 }\r
 769             }\r
 770         }\r
 771         if(rendered){\r
 772             this.onLayout(shallow, forceLayout);\r
 773         }\r
 774         // Initial layout completed\r
 775         this.hasLayout = true;\r
 776         delete this.forceLayout;\r
 777     },\r
 778 \r
 779     //private\r
 780     onLayout : Ext.emptyFn,\r
 781 \r
 782     // private\r
 783     shouldBufferLayout: function(){\r
 784         /*\r
 785          * Returns true if the container should buffer a layout.\r
 786          * This is true only if the container has previously been laid out\r
 787          * and has a parent container that is pending a layout.\r
 788          */\r
 789         var hl = this.hasLayout;\r
 790         if(this.ownerCt){\r
 791             // Only ever buffer if we've laid out the first time and we have one pending.\r
 792             return hl ? !this.hasLayoutPending() : false;\r
 793         }\r
 794         // Never buffer initial layout\r
 795         return hl;\r
 796     },\r
 797 \r
 798     // private\r
 799     hasLayoutPending: function(){\r
 800         // Traverse hierarchy to see if any parent container has a pending layout.\r
 801         var pending = false;\r
 802         this.ownerCt.bubble(function(c){\r
 803             if(c.layoutPending){\r
 804                 pending = true;\r
 805                 return false;\r
 806             }\r
 807         });\r
 808         return pending;\r
 809     },\r
 810 \r
 811     onShow : function(){\r
 812         Ext.Container.superclass.onShow.call(this);\r
 813         if(this.deferLayout !== undefined){\r
 814             this.doLayout(true);\r
 815         }\r
 816     },\r
 817 \r
 818     <div id="method-Ext.Container-getLayout"></div>/**\r
 819      * Returns the layout currently in use by the container.  If the container does not currently have a layout\r
 820      * set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout.\r
 821      * @return {ContainerLayout} layout The container's layout\r
 822      */\r
 823     getLayout : function(){\r
 824         if(!this.layout){\r
 825             var layout = new Ext.layout.ContainerLayout(this.layoutConfig);\r
 826             this.setLayout(layout);\r
 827         }\r
 828         return this.layout;\r
 829     },\r
 830 \r
 831     // private\r
 832     beforeDestroy : function(){\r
 833         if(this.items){\r
 834             Ext.destroy.apply(Ext, this.items.items);\r
 835         }\r
 836         if(this.monitorResize){\r
 837             Ext.EventManager.removeResizeListener(this.doLayout, this);\r
 838         }\r
 839         Ext.destroy(this.layout);\r
 840         Ext.Container.superclass.beforeDestroy.call(this);\r
 841     },\r
 842 \r
 843     <div id="method-Ext.Container-bubble"></div>/**\r
 844      * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (<i>this</i>) of\r
 845      * function call will be the scope provided or the current component. The arguments to the function\r
 846      * will be the args provided or the current component. If the function returns false at any point,\r
 847      * the bubble is stopped.\r
 848      * @param {Function} fn The function to call\r
 849      * @param {Object} scope (optional) The scope of the function (defaults to current node)\r
 850      * @param {Array} args (optional) The args to call the function with (default to passing the current component)\r
 851      * @return {Ext.Container} this\r
 852      */\r
 853     bubble : function(fn, scope, args){\r
 854         var p = this;\r
 855         while(p){\r
 856             if(fn.apply(scope || p, args || [p]) === false){\r
 857                 break;\r
 858             }\r
 859             p = p.ownerCt;\r
 860         }\r
 861         return this;\r
 862     },\r
 863 \r
 864     <div id="method-Ext.Container-cascade"></div>/**\r
 865      * Cascades down the component/container heirarchy from this component (called first), calling the specified function with\r
 866      * each component. The scope (<i>this</i>) of\r
 867      * function call will be the scope provided or the current component. The arguments to the function\r
 868      * will be the args provided or the current component. If the function returns false at any point,\r
 869      * the cascade is stopped on that branch.\r
 870      * @param {Function} fn The function to call\r
 871      * @param {Object} scope (optional) The scope of the function (defaults to current component)\r
 872      * @param {Array} args (optional) The args to call the function with (defaults to passing the current component)\r
 873      * @return {Ext.Container} this\r
 874      */\r
 875     cascade : function(fn, scope, args){\r
 876         if(fn.apply(scope || this, args || [this]) !== false){\r
 877             if(this.items){\r
 878                 var cs = this.items.items;\r
 879                 for(var i = 0, len = cs.length; i < len; i++){\r
 880                     if(cs[i].cascade){\r
 881                         cs[i].cascade(fn, scope, args);\r
 882                     }else{\r
 883                         fn.apply(scope || cs[i], args || [cs[i]]);\r
 884                     }\r
 885                 }\r
 886             }\r
 887         }\r
 888         return this;\r
 889     },\r
 890 \r
 891     <div id="method-Ext.Container-findById"></div>/**\r
 892      * Find a component under this container at any level by id\r
 893      * @param {String} id\r
 894      * @return Ext.Component\r
 895      */\r
 896     findById : function(id){\r
 897         var m, ct = this;\r
 898         this.cascade(function(c){\r
 899             if(ct != c && c.id === id){\r
 900                 m = c;\r
 901                 return false;\r
 902             }\r
 903         });\r
 904         return m || null;\r
 905     },\r
 906 \r
 907     <div id="method-Ext.Container-findByType"></div>/**\r
 908      * Find a component under this container at any level by xtype or class\r
 909      * @param {String/Class} xtype The xtype string for a component, or the class of the component directly\r
 910      * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is\r
 911      * the default), or true to check whether this Component is directly of the specified xtype.\r
 912      * @return {Array} Array of Ext.Components\r
 913      */\r
 914     findByType : function(xtype, shallow){\r
 915         return this.findBy(function(c){\r
 916             return c.isXType(xtype, shallow);\r
 917         });\r
 918     },\r
 919 \r
 920     <div id="method-Ext.Container-find"></div>/**\r
 921      * Find a component under this container at any level by property\r
 922      * @param {String} prop\r
 923      * @param {String} value\r
 924      * @return {Array} Array of Ext.Components\r
 925      */\r
 926     find : function(prop, value){\r
 927         return this.findBy(function(c){\r
 928             return c[prop] === value;\r
 929         });\r
 930     },\r
 931 \r
 932     <div id="method-Ext.Container-findBy"></div>/**\r
 933      * Find a component under this container at any level by a custom function. If the passed function returns\r
 934      * true, the component will be included in the results. The passed function is called with the arguments (component, this container).\r
 935      * @param {Function} fn The function to call\r
 936      * @param {Object} scope (optional)\r
 937      * @return {Array} Array of Ext.Components\r
 938      */\r
 939     findBy : function(fn, scope){\r
 940         var m = [], ct = this;\r
 941         this.cascade(function(c){\r
 942             if(ct != c && fn.call(scope || c, c, ct) === true){\r
 943                 m.push(c);\r
 944             }\r
 945         });\r
 946         return m;\r
 947     },\r
 948 \r
 949     <div id="method-Ext.Container-get"></div>/**\r
 950      * Get a component contained by this container (alias for items.get(key))\r
 951      * @param {String/Number} key The index or id of the component\r
 952      * @return {Ext.Component} Ext.Component\r
 953      */\r
 954     get : function(key){\r
 955         return this.items.get(key);\r
 956     }\r
 957 });\r
 958 \r
 959 Ext.Container.LAYOUTS = {};\r
 960 Ext.reg('container', Ext.Container);\r
 961 </pre>
 962 </body>
 963 </html>