2
* Ext JS Library 3.0 RC2
3
* Copyright(c) 2006-2009, Ext JS, LLC.
6
* http://extjs.com/license
10
* @class Ext.Container
11
* @extends Ext.BoxComponent
12
* <p>Base class for any {@link Ext.BoxComponent} that can contain other Components. Containers handle the
13
* basic behavior of containing items, namely adding, inserting and removing items.</p>
15
* <p>The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}.
16
* If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
17
* Container to be encapsulated by an HTML element to your specifications by using the
18
* <tt><b>{@link Ext.Component#autoEl autoEl}</b></tt> config option. This is a useful technique when creating
19
* embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels}
22
* <p>The code below illustrates both how to explicitly create a Container, and how to implicitly
23
* create one using the <b><tt>'container'</tt></b> xtype:<pre><code>
24
// explicitly create a Container
25
var embeddedColumns = new Ext.Container({
26
autoEl: 'div', // This is the default
29
// implicitly create Container by specifying xtype
31
autoEl: 'div', // This is the default.
38
// The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
43
fieldLabel: 'Start date'
49
fieldLabel: 'End date'
54
* <p><u><b>Layout</b></u></p>
55
* <p>Every Container delegates the rendering of its child Components to a layout manager class which must be
56
* configured into the Container using the <tt><b>{@link #layout}</b></tt> configuration property.</p>
57
* <p>When either specifying child {@link #items} of a Container, or dynamically {@link #add adding} Components
58
* to a Container, remember to consider how you wish the Container to arrange those child elements, and whether
59
* those child elements need to be sized using one of Ext's built-in <tt><b>{@link #layout}</b></tt> schemes. By
60
* default, Containers use the {@link Ext.layout.ContainerLayout ContainerLayout} scheme. This simply renders
61
* child components, appending them one after the other inside the Container, and <b>does not apply any sizing</b>
63
* <p>A common mistake is when a developer neglects to specify a <tt><b>{@link #layout}</b></tt>. Widgets like
64
* GridPanels or TreePanels are added to Containers for which no <tt><b>{@link #layout}</b></tt> has been specified.
65
* If a Container is left to use the default {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its
66
* child components will be resized, or changed in any way when the Container is resized.</p>
67
* <p>Another variation of this problem is when a developer will attempt to add a GridPanel to a TabPanel by wrapping
68
* the GridPanel <i>inside</i> a wrapping Panel (that has no <tt><b>{@link #layout}</b></tt> specified) and add that
69
* wrapping Panel to the TabPanel. A GridPanel <b>is</b> a Component which can be added unadorned into a Container.
70
* If that wrapping Panel has no <tt><b>{@link #layout}</b></tt> configuration, then the GridPanel will not be sized
72
* <p>Below is an example of adding a newly created GridPanel to a TabPanel. Note that a TabPanel uses
73
* {@link Ext.layout.CardLayout} as its layout manager which means all its child items are sized to
74
* {@link Ext.layout.FitLayout fit} exactly into its client area. The following code requires prior knowledge of
75
* how to create GridPanels. See {@link Ext.grid.GridPanel}, {@link Ext.data.Store} and {@link Ext.data.JsonReader}
76
* as well as the grid examples in the Ext installation's <tt>examples/grid</tt> directory.</p><pre><code>
77
// Create the GridPanel.
78
myGrid = new Ext.grid.GridPanel({
80
columns: myColumnModel,
81
title: 'Results', // the title becomes the title of the tab
84
myTabPanel.add(myGrid);
85
myTabPanel.setActiveTab(myGrid);
88
* <p><u><b>Adding via remote configuration</b></u></p>
90
* <p>A server side script can be used to add Components which are generated dynamically on the server.
91
* An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server
92
* based on certain parameters:
94
// execute an Ajax request to invoke server side script:
96
url: 'gen-invoice-grid.php',
97
// send additional parameters to instruct server script
99
startDate: Ext.getCmp('start-date').getValue(),
100
endDate: Ext.getCmp('end-date').getValue()
102
// process the response object to add it to the TabPanel:
103
success: function(xhr) {
104
var newComponent = eval(xhr.responseText); // see discussion below
105
myTabPanel.add(newComponent); // add the component to the TabPanel
106
myTabPanel.setActiveTab(newComponent);
108
failure: function() {
109
Ext.Msg.alert("Grid create failed", "Server communication failure");
113
* <p>The server script needs to return an executable Javascript statement which, when processed
114
* using <tt>eval()</tt>, will return either a config object with an {@link Ext.Component#xtype xtype},
115
* or an instantiated Component. The server might return this for example:</p><pre><code>
117
function formatDate(value){
118
return value ? value.dateFormat('M d, Y') : '';
121
var store = new Ext.data.Store({
122
url: 'get-invoice-data.php',
124
startDate: '01/01/2008',
125
endDate: '01/31/2008'
127
reader: new Ext.data.JsonReader({
128
record: 'transaction',
130
totalRecords: 'total'
134
{name: 'date', type: 'date', dateFormat: 'm/d/Y'},
135
{name: 'value', type: 'float'}
139
var grid = new Ext.grid.GridPanel({
140
title: 'Invoice Report',
141
bbar: new Ext.PagingToolbar(store),
144
{header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
145
{header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
146
{header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
147
{header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
151
return grid; // return instantiated component
154
* <p>When the above code fragment is passed through the <tt>eval</tt> function in the success handler
155
* of the Ajax request, the code is executed by the Javascript processor, and the anonymous function
156
* runs, and returns the instantiated grid component.</p>
157
* <p>Note: since the code above is <i>generated</i> by a server script, the <tt>baseParams</tt> for
158
* the Store, the metadata to allow generation of the Record layout, and the ColumnModel
159
* can all be generated into the code since these are all known on the server.</p>
163
Ext.Container = Ext.extend(Ext.BoxComponent, {
165
* @cfg {Boolean} monitorResize
166
* True to automatically monitor window resize events to handle anything that is sensitive to the current size
167
* of the viewport. This value is typically managed by the chosen <tt>{@link #layout}</tt> and should not need
168
* to be set manually.
171
* @cfg {String/Object} layout
172
* Specify the layout manager class for this container either as an Object or as a String:
173
* <div><ul class="mdetail-params">
175
* <li><u>Specify as an Object</u></li>
176
* <div><ul class="mdetail-params">
177
* <li>Example usage:</li>
186
* <li><tt><b>type</b></tt></li>
187
* <br/><p>The layout type to be used for this container. If not specified, a default {@link Ext.layout.ContainerLayout}
188
* will be created and used.</p>
189
* <br/><p>Valid layout <tt>type</tt> values are:</p>
190
* <div class="sub-desc"><ul class="mdetail-params">
191
* <li><tt><b>{@link Ext.layout.AbsoluteLayout absolute}</b></tt></li>
192
* <li><tt><b>{@link Ext.layout.AccordionLayout accordion}</b></tt></li>
193
* <li><tt><b>{@link Ext.layout.AnchorLayout anchor}</b></tt></li>
194
* <li><tt><b>{@link Ext.layout.ContainerLayout auto}</b></tt> <b>Default</b></li>
195
* <li><tt><b>{@link Ext.layout.BorderLayout border}</b></tt></li>
196
* <li><tt><b>{@link Ext.layout.CardLayout card}</b></tt></li>
197
* <li><tt><b>{@link Ext.layout.ColumnLayout column}</b></tt></li>
198
* <li><tt><b>{@link Ext.layout.FitLayout fit}</b></tt></li>
199
* <li><tt><b>{@link Ext.layout.FormLayout form}</b></tt></li>
200
* <li><tt><b>{@link Ext.layout.HBoxLayout hbox}</b></tt></li>
201
* <li><tt><b>{@link Ext.layout.MenuLayout menu}</b></tt></li>
202
* <li><tt><b>{@link Ext.layout.TableLayout table}</b></tt></li>
203
* <li><tt><b>{@link Ext.layout.ToolbarLayout toolbar}</b></tt></li>
204
* <li><tt><b>{@link Ext.layout.VBoxLayout vbox}</b></tt></li>
207
* <li>Layout specific configuration properties</li>
208
* <br/><p>Additional layout specific configuration properties may also be specified. For complete details regarding
209
* the valid config options for each layout type, see the layout class corresponding to the <tt>type</tt> specified.</p>
213
* <li><u>Specify as a String</u></li>
214
* <div><ul class="mdetail-params">
215
* <li>Example usage:</li>
223
* <li><tt><b>layout</b></tt></li>
224
* <br/><p>The layout <tt>type</tt> to be used for this container (see list of valid layout type values above).</p><br/>
225
* <li><tt><b>{@link #layoutConfig}</b></tt></li>
226
* <br/><p>Additional layout specific configuration properties. For complete details regarding the valid config
227
* options for each layout type, see the layout class corresponding to the <tt>layout</tt> specified.</p>
228
* </ul></div></ul></div>
231
* @cfg {Object} layoutConfig
232
* This is a config object containing properties specific to the chosen <tt><b>{@link #layout}</b></tt> if
233
* <tt><b>{@link #layout}</b></tt> has been specified as a <i>string</i>.</p>
236
* @cfg {Boolean/Number} bufferResize
237
* When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer
238
* the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers
239
* with a large quantity of sub-components for which frequent layout calls would be expensive.
242
* @cfg {String/Number} activeItem
243
* A string component id or the numeric index of the component that should be initially activated within the
244
* container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
245
* item in the container's collection). activeItem only applies to layout styles that can display
246
* items one at a time (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} and
247
* {@link Ext.layout.FitLayout}). Related to {@link Ext.layout.ContainerLayout#activeItem}.
251
* A single item, or an array of child Components to be added to this container.
252
* Each item can be any type of object based on {@link Ext.Component}.<br><br>
253
* Component config objects may also be specified in order to avoid the overhead
254
* of constructing a real Component object if lazy rendering might mean that the
255
* added Component will not be rendered immediately. To take advantage of this
256
* "lazy instantiation", set the {@link Ext.Component#xtype} config property to
257
* the registered type of the Component wanted.<br><br>
258
* For a list of all available xtypes, see {@link Ext.Component}.
259
* If a single item is being passed, it should be passed directly as an object
260
* reference (e.g., items: {...}). Multiple items should be passed as an array
261
* of objects (e.g., items: [{...}, {...}]).
264
* @cfg {Object} defaults
265
* <p>A config object that will be applied to all components added to this container either via the {@link #items}
266
* config or via the {@link #add} or {@link #insert} methods. The <tt>defaults</tt> config can contain any
267
* number of name/value property pairs to be added to each item, and should be valid for the types of items
268
* being added to the container. For example, to automatically apply padding to the body of each of a set of
269
* contained {@link Ext.Panel} items, you could pass: <tt>defaults: {bodyStyle:'padding:15px'}</tt>.</p><br/>
270
* <p><b>Note</b>: <tt>defaults</tt> will not be applied to config objects if the option is already specified.
271
* For example:</p><pre><code>
272
defaults: { // defaults are applied to items, not the container
277
xtype: 'panel', // defaults <b>do not</b> have precedence over
278
id: 'panel1', // options in config objects, so the defaults
279
autoScroll: false // will not be applied here, panel1 will be autoScroll:false
281
new Ext.Panel({ // defaults <b>do</b> have precedence over options
282
id: 'panel2', // options in components, so the defaults
283
autoScroll: false // will be applied here, panel2 will be autoScroll:true.
289
/** @cfg {Boolean} autoDestroy
290
* If true the container will automatically destroy any contained component that is removed from it, else
291
* destruction must be handled manually (defaults to true).
294
/** @cfg {Boolean} hideBorders
295
* True to hide the borders of each contained component, false to defer to the component's existing
296
* border settings (defaults to false).
298
/** @cfg {String} defaultType
299
* <p>The default {@link Ext.Component xtype} of child Components to create in this Container when
300
* a child item is specified as a raw configuration object, rather than as an instantiated Component.</p>
301
* <p>Defaults to <tt>'panel'</tt>, except {@link Ext.Toolbar} and {@link Ext.ButtonGroup} which
302
* default to <tt>'button'</tt>.</p>
304
defaultType: 'panel',
307
initComponent : function(){
308
Ext.Container.superclass.initComponent.call(this);
313
* Fires when the components in this container are arranged by the associated layout manager.
314
* @param {Ext.Container} this
315
* @param {ContainerLayout} layout The ContainerLayout implementation for this container
320
* Fires before any {@link Ext.Component} is added or inserted into the container.
321
* A handler can return false to cancel the add.
322
* @param {Ext.Container} this
323
* @param {Ext.Component} component The component being added
324
* @param {Number} index The index at which the component will be added to the container's items collection
328
* @event beforeremove
329
* Fires before any {@link Ext.Component} is removed from the container. A handler can return
330
* false to cancel the remove.
331
* @param {Ext.Container} this
332
* @param {Ext.Component} component The component being removed
338
* Fires after any {@link Ext.Component} is added or inserted into the container.
339
* @param {Ext.Container} this
340
* @param {Ext.Component} component The component that was added
341
* @param {Number} index The index at which the component was added to the container's items collection
347
* Fires after any {@link Ext.Component} is removed from the container.
348
* @param {Ext.Container} this
349
* @param {Ext.Component} component The component that was removed
354
this.enableBubble('add', 'remove');
357
* The collection of components in this container as a {@link Ext.util.MixedCollection}
358
* @type MixedCollection
361
var items = this.items;
364
if(Ext.isArray(items) && items.length > 0){
365
this.add.apply(this, items);
373
initItems : function(){
375
this.items = new Ext.util.MixedCollection(false, this.getComponentId);
376
this.getLayout(); // initialize the layout
381
setLayout : function(layout){
382
if(this.layout && this.layout != layout){
383
this.layout.setContainer(null);
386
this.layout = layout;
387
layout.setContainer(this);
392
Ext.Container.superclass.render.apply(this, arguments);
394
if(typeof this.layout == 'object' && !this.layout.layout){
395
this.layoutConfig = this.layout;
396
this.layout = this.layoutConfig.type;
398
if(typeof this.layout == 'string'){
399
this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
401
this.setLayout(this.layout);
403
if(this.activeItem !== undefined){
404
var item = this.activeItem;
405
delete this.activeItem;
406
this.layout.setActiveItem(item);
410
// force a layout if no ownerCt is set
411
this.doLayout(false, true);
413
if(this.monitorResize === true){
414
Ext.EventManager.onWindowResize(this.doLayout, this, [false]);
419
* <p>Returns the Element to be used to contain the child Components of this Container.</p>
420
* <p>An implementation is provided which returns the Container's {@link #getEl Element}, but
421
* if there is a more complex structure to a Container, this may be overridden to return
422
* the element into which the {@link #layout layout} renders child Components.</p>
423
* @return {Ext.Element} The Element to render child Components into.
425
getLayoutTarget : function(){
429
// private - used as the key lookup function for the items collection
430
getComponentId : function(comp){
431
return comp.getItemId();
435
* <p>Add a {@link Ext.Component Component} to this Container.</p><br>
437
* <li><b>Description</b> : <ul>
438
* <div class="sub-desc">Fires the {@link #beforeadd} event before adding, then fires
439
* the {@link #add} event after the component has been added.</div>
441
* <li><b>Notes</b> : <ul>
442
* <div class="sub-desc">When creating complex UIs, it is important to remember that
443
* sizing and positioning of child items is the responsibility of the Container's
444
* {@link #layout} manager. If you expect child items to be sized in response to user
445
* interactions, <b>you must specify a layout manager</b> which creates and manages
446
* the type of layout you have in mind. For example:<pre><code>
448
width:300, height: 300,
449
layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
451
title: 'Panel inside a Window'
455
* Omitting the {@link #layout} config means that the
456
* {@link Ext.layout.ContainerLayout default layout manager} will be used which does
457
* nothing but render child components sequentially into the Container (no sizing or
458
* positioning will be performed in this situation).</b></div>
459
* <div class="sub-desc">You should never specify {@link Ext.Component#renderTo renderTo}
460
* or call the {@link Ext.Component#render render method} of a child Component when
461
* using a Container as child Components of this container are rendered/managed by
462
* this container's {@link #layout} manager.</div>
463
* <div class="sub-desc">Certain layout managers allow dynamic addition of child
464
* components. Those that do include {@link Ext.layout.CardLayout},
465
* {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and
466
* {@link Ext.layout.TableLayout}. For example:<pre><code>
467
var myNewGrid = new Ext.grid.GridPanel({
471
myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout}
472
myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid);
473
* </code></pre></div>
474
* <div class="sub-desc">If the Container is <i>already rendered</i> when <tt>add</tt>
475
* is called, you may need to call {@link #doLayout} to refresh the view which causes
476
* any unrendered child Components to be rendered. This is required so that you can
477
* <tt>add</tt> multiple child components if needed while only refreshing the layout
478
* once. For example:<pre><code>
479
var tb = new {@link Ext.Toolbar}();
480
tb.render(document.body); // toolbar is rendered
481
tb.add({text:'Button 1'}); // add multiple items ({@link #defaultType} for {@link Ext.Toolbar Toolbar} is 'button')
482
tb.add({text:'Button 2'});
483
tb.{@link #doLayout}(); // refresh the layout
484
* </code></pre></div>
485
* <div class="sub-desc"><i>Warning:</i> Containers directly managed by the BorderLayout layout manager
486
* may not be removed or added. See the Notes for {@link Ext.layout.BorderLayout BorderLayout}
487
* for more details.</div>
490
* @param {Ext.Component/Object} component The Component to add.<br><br>
491
* Ext uses lazy rendering, and will only render the added Component should
492
* it become necessary, that is: when the Container is layed out either on first render
493
* or in response to a {@link #doLayout} call.<br><br>
494
* A Component config object may be passed instead of an instantiated Component object.
495
* The type of Component created from a config object is determined by the
496
* <tt>{@link Ext.Component#xtype xtype}</tt> config property. If no <tt>xtype</tt>
497
* is configured, the Container's {@link #defaultType} is used.<br><br>
498
* For a list of all available <tt>{@link Ext.Component#xtype xtypes}</tt>, see
499
* {@link Ext.Component}.<tt>{@link Ext.Component#xtype xtype}</tt>.
500
* @param {Ext.Component/Object} component2
501
* @param {Ext.Component/Object} etc
502
* @return {Ext.Component} component The Component (or config object) that was
503
* added with the {@link #defaults Container's default config values} applied.
505
add : function(comp){
507
var a = arguments, len = a.length;
509
for(var i = 0; i < len; i++){
514
var c = this.lookupComponent(this.applyDefaults(comp));
515
var pos = this.items.length;
516
if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
519
this.fireEvent('add', this, c, pos);
525
* Inserts a Component into this Container at a specified index. Fires the
526
* {@link #beforeadd} event before inserting, then fires the {@link #add} event after the
527
* Component has been inserted.
528
* @param {Number} index The index at which the Component will be inserted
529
* into the Container's items collection
530
* @param {Ext.Component} component The child Component to insert.<br><br>
531
* Ext uses lazy rendering, and will only render the inserted Component should
532
* it become necessary.<br><br>
533
* A Component config object may be passed in order to avoid the overhead of
534
* constructing a real Component object if lazy rendering might mean that the
535
* inserted Component will not be rendered immediately. To take advantage of
536
* this "lazy instantiation", set the {@link Ext.Component#xtype} config
537
* property to the registered type of the Component wanted.<br><br>
538
* For a list of all available xtypes, see {@link Ext.Component}.
539
* @return {Ext.Component} component The Component (or config object) that was
540
* inserted with the Container's default config values applied.
542
insert : function(index, comp){
544
var a = arguments, len = a.length;
546
for(var i = len-1; i >= 1; --i) {
547
this.insert(index, a[i]);
551
var c = this.lookupComponent(this.applyDefaults(comp));
553
if(c.ownerCt == this && this.items.indexOf(c) < index){
557
if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
558
this.items.insert(index, c);
560
this.fireEvent('add', this, c, index);
566
applyDefaults : function(c){
568
if(typeof c == 'string'){
569
c = Ext.ComponentMgr.get(c);
570
Ext.apply(c, this.defaults);
572
Ext.applyIf(c, this.defaults);
574
Ext.apply(c, this.defaults);
581
onBeforeAdd : function(item){
583
item.ownerCt.remove(item, false);
585
if(this.hideBorders === true){
586
item.border = (item.border === true);
591
* Removes a component from this container. Fires the {@link #beforeremove} event before removing, then fires
592
* the {@link #remove} event after the component has been removed.
593
* @param {Component/String} component The component reference or id to remove.
594
* @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
595
* Defaults to the value of this Container's {@link #autoDestroy} config.
596
* @return {Ext.Component} component The Component that was removed.
598
remove : function(comp, autoDestroy){
600
var c = this.getComponent(comp);
601
if(c && this.fireEvent('beforeremove', this, c) !== false){
602
this.items.remove(c);
604
if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){
607
if(this.layout && this.layout.activeItem == c){
608
delete this.layout.activeItem;
610
this.fireEvent('remove', this, c);
616
* Removes all components from this container.
617
* @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
618
* Defaults to the value of this Container's {@link #autoDestroy} config.
619
* @return {Array} Array of the destroyed components
621
removeAll: function(autoDestroy){
623
var item, rem = [], items = [];
624
this.items.each(function(i){
627
for (var i = 0, len = rem.length; i < len; ++i){
629
this.remove(item, autoDestroy);
630
if(item.ownerCt !== this){
638
* Gets a direct child Component by id, or by index.
639
* @param {String/Number} id or index of child Component to return.
640
* @return Ext.Component
642
getComponent : function(comp){
643
if(typeof comp == 'object'){
646
return this.items.get(comp);
650
lookupComponent : function(comp){
651
if(typeof comp == 'string'){
652
return Ext.ComponentMgr.get(comp);
653
}else if(!comp.events){
654
return this.createComponent(comp);
660
createComponent : function(config){
661
return Ext.create(config, this.defaultType);
665
* Force this container's layout to be recalculated. A call to this function is required after adding a new component
666
* to an already rendered container, or possibly after changing sizing/position properties of child components.
667
* @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto
668
* calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer)
669
* @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden.
670
* @return {Ext.Container} this
672
doLayout: function(shallow, force){
673
var rendered = this.rendered;
674
if(!this.isVisible() || this.collapsed){
676
this.deferLayout = this.deferLayout || !shallow;
679
delete this.deferLayout;
682
shallow = shallow && !this.deferLayout;
683
delete this.deferLayout;
684
if(rendered && this.layout){
685
this.layout.layout();
687
if(shallow !== true && this.items){
688
var cs = this.items.items;
689
for(var i = 0, len = cs.length; i < len; i++){
697
this.onLayout(shallow, force);
702
onLayout: Ext.emptyFn,
705
Ext.Container.superclass.onShow.call(this);
706
if(this.deferLayout !== undefined){
712
* Returns the layout currently in use by the container. If the container does not currently have a layout
713
* set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout.
714
* @return {ContainerLayout} layout The container's layout
716
getLayout : function(){
718
var layout = new Ext.layout.ContainerLayout(this.layoutConfig);
719
this.setLayout(layout);
725
beforeDestroy : function(){
727
Ext.destroy.apply(Ext, this.items.items);
729
if(this.monitorResize){
730
Ext.EventManager.removeResizeListener(this.doLayout, this);
732
Ext.destroy(this.layout);
733
Ext.Container.superclass.beforeDestroy.call(this);
737
* Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (<i>this</i>) of
738
* function call will be the scope provided or the current component. The arguments to the function
739
* will be the args provided or the current component. If the function returns false at any point,
740
* the bubble is stopped.
741
* @param {Function} fn The function to call
742
* @param {Object} scope (optional) The scope of the function (defaults to current node)
743
* @param {Array} args (optional) The args to call the function with (default to passing the current component)
744
* @return {Ext.Container} this
746
bubble : function(fn, scope, args){
749
if(fn.apply(scope || p, args || [p]) === false){
758
* Cascades down the component/container heirarchy from this component (called first), calling the specified function with
759
* each component. The scope (<i>this</i>) of
760
* function call will be the scope provided or the current component. The arguments to the function
761
* will be the args provided or the current component. If the function returns false at any point,
762
* the cascade is stopped on that branch.
763
* @param {Function} fn The function to call
764
* @param {Object} scope (optional) The scope of the function (defaults to current component)
765
* @param {Array} args (optional) The args to call the function with (defaults to passing the current component)
766
* @return {Ext.Container} this
768
cascade : function(fn, scope, args){
769
if(fn.apply(scope || this, args || [this]) !== false){
771
var cs = this.items.items;
772
for(var i = 0, len = cs.length; i < len; i++){
774
cs[i].cascade(fn, scope, args);
776
fn.apply(scope || cs[i], args || [cs[i]]);
785
* Find a component under this container at any level by id
787
* @return Ext.Component
789
findById : function(id){
791
this.cascade(function(c){
792
if(ct != c && c.id === id){
801
* Find a component under this container at any level by xtype or class
802
* @param {String/Class} xtype The xtype string for a component, or the class of the component directly
803
* @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
804
* the default), or true to check whether this Component is directly of the specified xtype.
805
* @return {Array} Array of Ext.Components
807
findByType : function(xtype, shallow){
808
return this.findBy(function(c){
809
return c.isXType(xtype, shallow);
814
* Find a component under this container at any level by property
815
* @param {String} prop
816
* @param {String} value
817
* @return {Array} Array of Ext.Components
819
find : function(prop, value){
820
return this.findBy(function(c){
821
return c[prop] === value;
826
* Find a component under this container at any level by a custom function. If the passed function returns
827
* true, the component will be included in the results. The passed function is called with the arguments (component, this container).
828
* @param {Function} fcn
829
* @param {Object} scope (optional)
830
* @return {Array} Array of Ext.Components
832
findBy : function(fn, scope){
833
var m = [], ct = this;
834
this.cascade(function(c){
835
if(ct != c && fn.call(scope || c, c, ct) === true){
843
* Get a component contained by this container (alias for items.get(key))
844
* @param {String/Number} key The index or id of the component
845
* @return {Ext.Component} Ext.Component
848
return this.items.get(key);
852
Ext.Container.LAYOUTS = {};
853
Ext.reg('container', Ext.Container);
b'\\ No newline at end of file'
added
removed
webui/ecosystem/extjs/source/widgets/Container.js
