src/widgets/layout/ContainerLayout.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   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>
  17  */
  18 Ext.layout.ContainerLayout = function(config){
  19     Ext.apply(this, config);
  20 };
  21
  22 Ext.layout.ContainerLayout.prototype = {
  23     /**
  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>
  34      * </ul></div>
  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'
  38      * </code></pre>
  39      * </p>
  40      */
  41     /**
  42      * @cfg {Boolean} renderHidden
  43      * True to hide each contained item on render (defaults to false).
  44      */
  45
  46     /**
  47      * A reference to the {@link Ext.Component} that is active.  For example, <pre><code>
  48      * if(myPanel.layout.activeItem.id == 'item-1') { ... }
  49      * </code></pre>
  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
  55      */
  56
  57     // private
  58     monitorResize:false,
  59     // private
  60     activeItem : null,
  61
  62     // private
  63     layout : function(){
  64         var target = this.container.getLayoutTarget();
  65         this.onLayout(this.container, target);
  66         this.container.fireEvent('afterlayout', this.container, this);
  67     },
  68
  69     // private
  70     onLayout : function(ct, target){
  71         this.renderAll(ct, target);
  72     },
  73
  74     // private
  75     isValidParent : function(c, target){
  76                 return target && c.getDomPositionEl().dom.parentNode == (target.dom || target);
  77     },
  78
  79     // private
  80     renderAll : function(ct, target){
  81         var items = ct.items.items;
  82         for(var i = 0, len = items.length; i < len; i++) {
  83             var c = items[i];
  84             if(c && (!c.rendered || !this.isValidParent(c, target))){
  85                 this.renderItem(c, i, target);
  86             }
  87         }
  88     },
  89
  90     // private
  91     renderItem : function(c, position, target){
  92         if(c && !c.rendered){
  93             c.render(target, position);
  94             this.configureItem(c, position);
  95         }else if(c && !this.isValidParent(c, target)){
  96             if(typeof position == 'number'){
  97                 position = target.dom.childNodes[position];
  98             }
  99             target.dom.insertBefore(c.getDomPositionEl().dom, position || null);
 100             c.container = target;
 101             this.configureItem(c, position);
 102         }
 103     },
 104
 105     // private
 106     configureItem: function(c, position){
 107         if(this.extraCls){
 108             var t = c.getPositionEl ? c.getPositionEl() : c;
 109             t.addClass(this.extraCls);
 110         }
 111         if (this.renderHidden && c != this.activeItem) {
 112             c.hide();
 113         }
 114         if(c.doLayout){
 115             c.doLayout(false, this.forceLayout);
 116         }
 117     },
 118
 119     // private
 120     onResize: function(){
 121         if(this.container.collapsed){
 122             return;
 123         }
 124         var b = this.container.bufferResize;
 125         if(b){
 126             if(!this.resizeTask){
 127                 this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
 128                 this.resizeBuffer = typeof b == 'number' ? b : 100;
 129             }
 130             this.resizeTask.delay(this.resizeBuffer);
 131         }else{
 132             this.runLayout();
 133         }
 134     },
 135
 136     // private
 137     runLayout: function(){
 138         this.layout();
 139         this.container.onLayout();
 140     },
 141
 142     // private
 143     setContainer : function(ct){
 144         if(this.monitorResize && ct != this.container){
 145             if(this.container){
 146                 this.container.un('resize', this.onResize, this);
 147                 this.container.un('bodyresize', this.onResize, this);
 148             }
 149             if(ct){
 150                 ct.on({
 151                     scope: this,
 152                     resize: this.onResize,
 153                     bodyresize: this.onResize
 154                 });
 155             }
 156         }
 157         this.container = ct;
 158     },
 159
 160     // private
 161     parseMargins : function(v){
 162         if(typeof v == 'number'){
 163             v = v.toString();
 164         }
 165         var ms = v.split(' ');
 166         var len = ms.length;
 167         if(len == 1){
 168             ms[1] = ms[0];
 169             ms[2] = ms[0];
 170             ms[3] = ms[0];
 171         }
 172         if(len == 2){
 173             ms[2] = ms[0];
 174             ms[3] = ms[1];
 175         }
 176         if(len == 3){
 177             ms[3] = ms[1];
 178         }
 179         return {
 180             top:parseInt(ms[0], 10) || 0,
 181             right:parseInt(ms[1], 10) || 0,
 182             bottom:parseInt(ms[2], 10) || 0,
 183             left:parseInt(ms[3], 10) || 0
 184         };
 185     },
 186
 187     /**
 188      * The {@link Template Ext.Template} used by Field rendering layout classes (such as
 189      * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
 190      * labeled and styled form Field. A default Template is supplied, but this may be
 191      * overriden to create custom field structures. The template processes values returned from
 192      * {@link Ext.layout.FormLayout#getTemplateArgs}.
 193      * @property fieldTpl
 194      * @type Ext.Template
 195      */
 196     fieldTpl: (function() {
 197         var t = new Ext.Template(
 198             '<div class="x-form-item {itemCls}" tabIndex="-1">',
 199                 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
 200                 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
 201                 '</div><div class="{clearCls}"></div>',
 202             '</div>'
 203         );
 204         t.disableFormats = true;
 205         return t.compile();
 206     })(),
 207
 208     /*
 209      * Destroys this layout. This is a template method that is empty by default, but should be implemented
 210      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
 211      * @protected
 212      */
 213     destroy : Ext.emptyFn
 214 };
 215 Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;