Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / 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>