2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.layout.ContainerLayout
\r
11 * <p>Every {@link Ext.Container Container} delegates the rendering of its child {@link Ext.Component Component}s
\r
12 * to a layout manager class which must be {@link Ext.Container#layout configured} into the Container.</p> Some
\r
13 * layouts also provide sizing and positioning of child Components/
\r
15 * <p>The ContainerLayout class is the default layout manager used when no layout is configured into a Container.
\r
16 * It provides the basic foundation for all other layout classes in Ext. It simply renders all child Components
\r
17 * into the Container, performing no sizing os positioning services. This class is intended to be extended and should
\r
18 * generally not need to be created directly via the new keyword.
\r
20 Ext.layout.ContainerLayout = function(config){
\r
21 Ext.apply(this, config);
\r
24 Ext.layout.ContainerLayout.prototype = {
\r
26 * @cfg {String} extraCls
\r
27 * An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for
\r
28 * adding customized styles to the container or any of its children using standard CSS rules.
\r
31 * @cfg {Boolean} renderHidden
\r
32 * True to hide each contained item on render (defaults to false).
\r
36 * A reference to the {@link Ext.Component} that is active. For example,
\r
37 * if(myPanel.layout.activeItem.id == 'item-1') { ... }. activeItem only applies to layout styles that can
\r
38 * display items one at a time (like {@link Ext.layout.Accordion}, {@link Ext.layout.CardLayout}
\r
39 * and {@link Ext.layout.FitLayout}). Read-only. Related to {@link Ext.Container#activeItem}.
\r
40 * @type {Ext.Component}
\r
41 * @property activeItem
\r
45 monitorResize:false,
\r
50 layout : function(){
\r
51 var target = this.container.getLayoutTarget();
\r
52 this.onLayout(this.container, target);
\r
53 this.container.fireEvent('afterlayout', this.container, this);
\r
57 onLayout : function(ct, target){
\r
58 this.renderAll(ct, target);
\r
62 isValidParent : function(c, target){
\r
63 var el = c.getPositionEl ? c.getPositionEl() : c.getEl();
\r
64 return el.dom.parentNode == target.dom;
\r
68 renderAll : function(ct, target){
\r
69 var items = ct.items.items;
\r
70 for(var i = 0, len = items.length; i < len; i++) {
\r
72 if(c && (!c.rendered || !this.isValidParent(c, target))){
\r
73 this.renderItem(c, i, target);
\r
79 renderItem : function(c, position, target){
\r
80 if(c && !c.rendered){
\r
81 c.render(target, position);
\r
83 var t = c.getPositionEl ? c.getPositionEl() : c;
\r
84 t.addClass(this.extraCls);
\r
86 if (this.renderHidden && c != this.activeItem) {
\r
89 }else if(c && !this.isValidParent(c, target)){
\r
91 var t = c.getPositionEl ? c.getPositionEl() : c;
\r
92 t.addClass(this.extraCls);
\r
94 if(typeof position == 'number'){
\r
95 position = target.dom.childNodes[position];
\r
97 target.dom.insertBefore(c.getEl().dom, position || null);
\r
98 if (this.renderHidden && c != this.activeItem) {
\r
105 onResize: function(){
\r
106 if(this.container.collapsed){
\r
109 var b = this.container.bufferResize;
\r
111 if(!this.resizeTask){
\r
112 this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
\r
113 this.resizeBuffer = typeof b == 'number' ? b : 100;
\r
115 this.resizeTask.delay(this.resizeBuffer);
\r
122 setContainer : function(ct){
\r
123 if(this.monitorResize && ct != this.container){
\r
124 if(this.container){
\r
125 this.container.un('resize', this.onResize, this);
\r
128 ct.on('resize', this.onResize, this);
\r
131 this.container = ct;
\r
135 parseMargins : function(v){
\r
136 var ms = v.split(' ');
\r
137 var len = ms.length;
\r
148 top:parseInt(ms[0], 10) || 0,
\r
149 right:parseInt(ms[1], 10) || 0,
\r
150 bottom:parseInt(ms[2], 10) || 0,
\r
151 left:parseInt(ms[3], 10) || 0
\r
156 * Destroys this layout. This is a template method that is empty by default, but should be implemented
\r
157 * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
\r
160 destroy : Ext.emptyFn
\r
162 Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;