3 * Copyright(c) 2006-2010 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.layout.ContainerLayout
9 * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
10 * configuration property. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
12 Ext.layout.ContainerLayout = Ext.extend(Object, {
14 * @cfg {String} extraCls
15 * <p>An optional extra CSS class that will be added to the container. This can be useful for adding
16 * customized styles to the container or any of its children using standard CSS rules. See
17 * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.</p>
18 * <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
19 * which assign a value by default:
20 * <div class="mdetail-params"><ul>
21 * <li>{@link Ext.layout.AbsoluteLayout Absolute Layout} : <tt>'x-abs-layout-item'</tt></li>
22 * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-item'</tt></li>
23 * <li>{@link Ext.layout.ColumnLayout Column Layout} : <tt>'x-column'</tt></li>
25 * To configure the above Classes with an extra CSS class append to the default. For example,
26 * for ColumnLayout:<pre><code>
27 * extraCls: 'x-column custom-class'
32 * @cfg {Boolean} renderHidden
33 * True to hide each contained item on render (defaults to false).
37 * A reference to the {@link Ext.Component} that is active. For example, <pre><code>
38 * if(myPanel.layout.activeItem.id == 'item-1') { ... }
40 * <tt>activeItem</tt> only applies to layout styles that can display items one at a time
41 * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
42 * and {@link Ext.layout.FitLayout}). Read-only. Related to {@link Ext.Container#activeItem}.
43 * @type {Ext.Component}
44 * @property activeItem
52 constructor : function(config){
53 this.id = Ext.id(null, 'ext-layout-');
54 Ext.apply(this, config);
59 /* Workaround for how IE measures autoWidth elements. It prefers bottom-up measurements
60 whereas other browser prefer top-down. We will hide all target child elements before we measure and
61 put them back to get an accurate measurement.
63 IEMeasureHack : function(target, viewFlag) {
64 var tChildren = target.dom.childNodes, tLen = tChildren.length, c, d = [], e, i, ret;
65 for (i = 0 ; i < tLen ; i++) {
69 d[i] = e.getStyle('display');
70 e.setStyle({display: 'none'});
73 ret = target ? target.getViewSize(viewFlag) : {};
74 for (i = 0 ; i < tLen ; i++) {
78 e.setStyle({display: d[i]});
84 // Placeholder for the derived layouts
85 getLayoutTargetSize : Ext.EmptyFn,
89 var ct = this.container, target = ct.getLayoutTarget();
90 if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
91 target.addClass(this.targetCls);
93 this.onLayout(ct, target);
94 ct.fireEvent('afterlayout', ct, this);
98 onLayout : function(ct, target){
99 this.renderAll(ct, target);
103 isValidParent : function(c, target){
104 return target && c.getPositionEl().dom.parentNode == (target.dom || target);
108 renderAll : function(ct, target){
109 var items = ct.items.items, i, c, len = items.length;
110 for(i = 0; i < len; i++) {
112 if(c && (!c.rendered || !this.isValidParent(c, target))){
113 this.renderItem(c, i, target);
119 renderItem : function(c, position, target){
122 c.render(target, position);
123 this.configureItem(c, position);
124 }else if(!this.isValidParent(c, target)){
125 if(Ext.isNumber(position)){
126 position = target.dom.childNodes[position];
128 target.dom.insertBefore(c.getPositionEl().dom, position || null);
129 c.container = target;
130 this.configureItem(c, position);
136 // Get all rendered items to lay out.
137 getRenderedItems: function(ct){
138 var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = [];
139 for (i = 0; i < len; i++) {
140 if((c = cti[i]).rendered && this.isValidParent(c, t)){
148 configureItem: function(c, position){
150 var t = c.getPositionEl ? c.getPositionEl() : c;
151 t.addClass(this.extraCls);
153 // If we are forcing a layout, do so *before* we hide so elements have height/width
154 if(c.doLayout && this.forceLayout){
157 if (this.renderHidden && c != this.activeItem) {
162 onRemove: function(c){
163 if(this.activeItem == c){
164 delete this.activeItem;
166 if(c.rendered && this.extraCls){
167 var t = c.getPositionEl ? c.getPositionEl() : c;
168 t.removeClass(this.extraCls);
172 afterRemove: function(c){
174 c.removeMode = 'container';
175 delete c.removeRestore;
180 onResize: function(){
181 var ct = this.container,
186 if(b = ct.bufferResize){
187 // Only allow if we should buffer the layout
188 if(ct.shouldBufferLayout()){
189 if(!this.resizeTask){
190 this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
191 this.resizeBuffer = Ext.isNumber(b) ? b : 50;
193 ct.layoutPending = true;
194 this.resizeTask.delay(this.resizeBuffer);
201 runLayout: function(){
202 var ct = this.container;
203 // AutoLayout is known to require the recursive doLayout call, others need this currently (BorderLayout for example)
204 // but shouldn't. A more extensive review will take place for 3.2 which requires a ContainerMgr with hierarchy lookups.
208 delete ct.layoutPending;
212 setContainer : function(ct){
213 if (!Ext.LayoutManager) {
214 Ext.LayoutManager = {};
217 /* This monitorResize flag will be renamed soon as to avoid confusion
218 * with the Container version which hooks onWindowResize to doLayout
220 * monitorResize flag in this context attaches the resize event between
221 * a container and it's layout
224 if(this.monitorResize && ct != this.container){
225 var old = this.container;
227 old.un(old.resizeEvent, this.onResize, this);
230 ct.on(ct.resizeEvent, this.onResize, this);
237 parseMargins : function(v){
241 var ms = v.split(' ');
244 ms[1] = ms[2] = ms[3] = ms[0];
252 top:parseInt(ms[0], 10) || 0,
253 right:parseInt(ms[1], 10) || 0,
254 bottom:parseInt(ms[2], 10) || 0,
255 left:parseInt(ms[3], 10) || 0
260 * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
261 * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
262 * labeled and styled form Field. A default Template is supplied, but this may be
263 * overriden to create custom field structures. The template processes values returned from
264 * {@link Ext.layout.FormLayout#getTemplateArgs}.
268 fieldTpl: (function() {
269 var t = new Ext.Template(
270 '<div class="x-form-item {itemCls}" tabIndex="-1">',
271 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
272 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
273 '</div><div class="{clearCls}"></div>',
276 t.disableFormats = true;
281 * Destroys this layout. This is a template method that is empty by default, but should be implemented
282 * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
285 destroy : function(){
286 if(!Ext.isEmpty(this.targetCls)){
287 var target = this.container.getLayoutTarget();
289 target.removeClass(this.targetCls);