src/widgets/layout/ContainerLayout.js

   1 /*!
   2  * Ext JS Library 3.0.3
   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(Ext.isNumber(position)){
  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 && this.forceLayout){
 115             c.doLayout(false, true);
 116         }
 117     },
 118
 119     onRemove: function(c){
 120          if(this.activeItem == c){
 121             delete this.activeItem;
 122          }
 123          if(c.rendered && this.extraCls){
 124             var t = c.getPositionEl ? c.getPositionEl() : c;
 125             t.removeClass(this.extraCls);
 126         }
 127     },
 128
 129     // private
 130     onResize: function(){
 131         var ct = this.container,
 132             b;
 133
 134         if(ct.collapsed){
 135             return;
 136         }
 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;
 143                 }
 144                 ct.layoutPending = true;
 145                 this.resizeTask.delay(this.resizeBuffer);
 146             }
 147         }else{
 148             ct.doLayout();
 149         }
 150     },
 151
 152     // private
 153     runLayout: function(){
 154         var ct = this.container;
 155         ct.doLayout();
 156         delete ct.layoutPending;
 157     },
 158
 159     // private
 160     setContainer : function(ct){
 161         if(this.monitorResize && ct != this.container){
 162             var old = this.container;
 163             if(old){
 164                 old.un(old.resizeEvent, this.onResize, this);
 165             }
 166             if(ct){
 167                 ct.on(ct.resizeEvent, this.onResize, this);
 168             }
 169         }
 170         this.container = ct;
 171     },
 172
 173     // private
 174     parseMargins : function(v){
 175         if(Ext.isNumber(v)){
 176             v = v.toString();
 177         }
 178         var ms = v.split(' ');
 179         var len = ms.length;
 180         if(len == 1){
 181             ms[1] = ms[0];
 182             ms[2] = ms[0];
 183             ms[3] = ms[0];
 184         }
 185         if(len == 2){
 186             ms[2] = ms[0];
 187             ms[3] = ms[1];
 188         }
 189         if(len == 3){
 190             ms[3] = ms[1];
 191         }
 192         return {
 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
 197         };
 198     },
 199
 200     /**
 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}.
 206      * @property fieldTpl
 207      * @type Ext.Template
 208      */
 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>',
 215             '</div>'
 216         );
 217         t.disableFormats = true;
 218         return t.compile();
 219     })(),
 220
 221     /*
 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.
 224      * @protected
 225      */
 226     destroy : Ext.emptyFn
 227 };
 228 Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;