3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.layout.ContainerLayout
9 * <p>The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to
10 * render any child Components when no <tt>{@link Ext.Container#layout layout}</tt> is configured into
11 * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout
12 * classes in Ext. It simply renders all child Components into the Container, performing no sizing or
13 * positioning services. To utilize a layout that provides sizing and positioning of child Components,
14 * specify an appropriate <tt>{@link Ext.Container#layout layout}</tt>.</p>
15 * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
16 * configuration property. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
18 Ext.layout.ContainerLayout = function(config){
19 Ext.apply(this, config);
22 Ext.layout.ContainerLayout.prototype = {
24 * @cfg {String} extraCls
25 * <p>An optional extra CSS class that will be added to the container. This can be useful for adding
26 * customized styles to the container or any of its children using standard CSS rules. See
27 * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.</p>
28 * <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
29 * which assign a value by default:
30 * <div class="mdetail-params"><ul>
31 * <li>{@link Ext.layout.AbsoluteLayout Absolute Layout} : <tt>'x-abs-layout-item'</tt></li>
32 * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-item'</tt></li>
33 * <li>{@link Ext.layout.ColumnLayout Column Layout} : <tt>'x-column'</tt></li>
35 * To configure the above Classes with an extra CSS class append to the default. For example,
36 * for ColumnLayout:<pre><code>
37 * extraCls: 'x-column custom-class'
42 * @cfg {Boolean} renderHidden
43 * True to hide each contained item on render (defaults to false).
47 * A reference to the {@link Ext.Component} that is active. For example, <pre><code>
48 * if(myPanel.layout.activeItem.id == 'item-1') { ... }
50 * <tt>activeItem</tt> only applies to layout styles that can display items one at a time
51 * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
52 * and {@link Ext.layout.FitLayout}). Read-only. Related to {@link Ext.Container#activeItem}.
53 * @type {Ext.Component}
54 * @property activeItem
64 var target = this.container.getLayoutTarget();
65 this.onLayout(this.container, target);
66 this.container.fireEvent('afterlayout', this.container, this);
70 onLayout : function(ct, target){
71 this.renderAll(ct, target);
75 isValidParent : function(c, target){
76 return target && c.getDomPositionEl().dom.parentNode == (target.dom || target);
80 renderAll : function(ct, target){
81 var items = ct.items.items;
82 for(var i = 0, len = items.length; i < len; i++) {
84 if(c && (!c.rendered || !this.isValidParent(c, target))){
85 this.renderItem(c, i, target);
91 renderItem : function(c, position, target){
93 c.render(target, position);
94 this.configureItem(c, position);
95 }else if(c && !this.isValidParent(c, target)){
96 if(Ext.isNumber(position)){
97 position = target.dom.childNodes[position];
99 target.dom.insertBefore(c.getDomPositionEl().dom, position || null);
100 c.container = target;
101 this.configureItem(c, position);
106 configureItem: function(c, position){
108 var t = c.getPositionEl ? c.getPositionEl() : c;
109 t.addClass(this.extraCls);
111 if (this.renderHidden && c != this.activeItem) {
114 if(c.doLayout && this.forceLayout){
115 c.doLayout(false, true);
119 onRemove: function(c){
120 if(this.activeItem == c){
121 delete this.activeItem;
123 if(c.rendered && this.extraCls){
124 var t = c.getPositionEl ? c.getPositionEl() : c;
125 t.removeClass(this.extraCls);
130 onResize: function(){
131 var ct = this.container,
137 if(b = ct.bufferResize){
138 // Only allow if we should buffer the layout
139 if(ct.shouldBufferLayout()){
140 if(!this.resizeTask){
141 this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
142 this.resizeBuffer = Ext.isNumber(b) ? b : 50;
144 ct.layoutPending = true;
145 this.resizeTask.delay(this.resizeBuffer);
153 runLayout: function(){
154 var ct = this.container;
156 delete ct.layoutPending;
160 setContainer : function(ct){
161 if(this.monitorResize && ct != this.container){
162 var old = this.container;
164 old.un(old.resizeEvent, this.onResize, this);
167 ct.on(ct.resizeEvent, this.onResize, this);
174 parseMargins : function(v){
178 var ms = v.split(' ');
193 top:parseInt(ms[0], 10) || 0,
194 right:parseInt(ms[1], 10) || 0,
195 bottom:parseInt(ms[2], 10) || 0,
196 left:parseInt(ms[3], 10) || 0
201 * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
202 * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
203 * labeled and styled form Field. A default Template is supplied, but this may be
204 * overriden to create custom field structures. The template processes values returned from
205 * {@link Ext.layout.FormLayout#getTemplateArgs}.
209 fieldTpl: (function() {
210 var t = new Ext.Template(
211 '<div class="x-form-item {itemCls}" tabIndex="-1">',
212 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
213 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
214 '</div><div class="{clearCls}"></div>',
217 t.disableFormats = true;
222 * Destroys this layout. This is a template method that is empty by default, but should be implemented
223 * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
226 destroy : Ext.emptyFn
228 Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;