src/widgets/layout/ContainerLayout.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   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>
  11  */
  12 Ext.layout.ContainerLayout = Ext.extend(Object, {
  13     /**
  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>
  24      * </ul></div>
  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'
  28      * </code></pre>
  29      * </p>
  30      */
  31     /**
  32      * @cfg {Boolean} renderHidden
  33      * True to hide each contained item on render (defaults to false).
  34      */
  35
  36     /**
  37      * A reference to the {@link Ext.Component} that is active.  For example, <pre><code>
  38      * if(myPanel.layout.activeItem.id == 'item-1') { ... }
  39      * </code></pre>
  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
  45      */
  46
  47     // private
  48     monitorResize:false,
  49     // private
  50     activeItem : null,
  51
  52     constructor : function(config){
  53         this.id = Ext.id(null, 'ext-layout-');
  54         Ext.apply(this, config);
  55     },
  56
  57     type: 'container',
  58
  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.
  62     */
  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++) {
  66             c = tChildren[i];
  67             e = Ext.get(c);
  68             if (e) {
  69                 d[i] = e.getStyle('display');
  70                 e.setStyle({display: 'none'});
  71             }
  72         }
  73         ret = target ? target.getViewSize(viewFlag) : {};
  74         for (i = 0 ; i < tLen ; i++) {
  75             c = tChildren[i];
  76             e = Ext.get(c);
  77             if (e) {
  78                 e.setStyle({display: d[i]});
  79             }
  80         }
  81         return ret;
  82     },
  83
  84     // Placeholder for the derived layouts
  85     getLayoutTargetSize : Ext.EmptyFn,
  86
  87     // private
  88     layout : function(){
  89         var ct = this.container, target = ct.getLayoutTarget();
  90         if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
  91             target.addClass(this.targetCls);
  92         }
  93         this.onLayout(ct, target);
  94         ct.fireEvent('afterlayout', ct, this);
  95     },
  96
  97     // private
  98     onLayout : function(ct, target){
  99         this.renderAll(ct, target);
 100     },
 101
 102     // private
 103     isValidParent : function(c, target){
 104         return target && c.getPositionEl().dom.parentNode == (target.dom || target);
 105     },
 106
 107     // private
 108     renderAll : function(ct, target){
 109         var items = ct.items.items, i, c, len = items.length;
 110         for(i = 0; i < len; i++) {
 111             c = items[i];
 112             if(c && (!c.rendered || !this.isValidParent(c, target))){
 113                 this.renderItem(c, i, target);
 114             }
 115         }
 116     },
 117
 118     /**
 119      * @private
 120      * Renders the given Component into the target Element. If the Component is already rendered,
 121      * it is moved to the provided target instead.
 122      * @param {Ext.Component} c The Component to render
 123      * @param {Number} position The position within the target to render the item to
 124      * @param {Ext.Element} target The target Element
 125      */
 126     renderItem : function(c, position, target){
 127         if (c) {
 128             if (!c.rendered) {
 129                 c.render(target, position);
 130                 this.configureItem(c, position);
 131             } else if (!this.isValidParent(c, target)) {
 132                 if (Ext.isNumber(position)) {
 133                     position = target.dom.childNodes[position];
 134                 }
 135
 136                 target.dom.insertBefore(c.getPositionEl().dom, position || null);
 137                 c.container = target;
 138                 this.configureItem(c, position);
 139             }
 140         }
 141     },
 142
 143     // private.
 144     // Get all rendered items to lay out.
 145     getRenderedItems: function(ct){
 146         var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = [];
 147         for (i = 0; i < len; i++) {
 148             if((c = cti[i]).rendered && this.isValidParent(c, t)){
 149                 items.push(c);
 150             }
 151         };
 152         return items;
 153     },
 154
 155     /**
 156      * @private
 157      * Applies extraCls and hides the item if renderHidden is true
 158      */
 159     configureItem: function(c, position){
 160         if (this.extraCls) {
 161             var t = c.getPositionEl ? c.getPositionEl() : c;
 162             t.addClass(this.extraCls);
 163         }
 164
 165         // If we are forcing a layout, do so *before* we hide so elements have height/width
 166         if (c.doLayout && this.forceLayout) {
 167             c.doLayout();
 168         }
 169         if (this.renderHidden && c != this.activeItem) {
 170             c.hide();
 171         }
 172     },
 173
 174     onRemove: function(c){
 175         if(this.activeItem == c){
 176             delete this.activeItem;
 177         }
 178         if(c.rendered && this.extraCls){
 179             var t = c.getPositionEl ? c.getPositionEl() : c;
 180             t.removeClass(this.extraCls);
 181         }
 182     },
 183
 184     afterRemove: function(c){
 185         if(c.removeRestore){
 186             c.removeMode = 'container';
 187             delete c.removeRestore;
 188         }
 189     },
 190
 191     // private
 192     onResize: function(){
 193         var ct = this.container,
 194             b;
 195         if(ct.collapsed){
 196             return;
 197         }
 198         if(b = ct.bufferResize && ct.shouldBufferLayout()){
 199             if(!this.resizeTask){
 200                 this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
 201                 this.resizeBuffer = Ext.isNumber(b) ? b : 50;
 202             }
 203             ct.layoutPending = true;
 204             this.resizeTask.delay(this.resizeBuffer);
 205         }else{
 206             this.runLayout();
 207         }
 208     },
 209
 210     runLayout: function(){
 211         var ct = this.container;
 212         this.layout();
 213         ct.onLayout();
 214         delete ct.layoutPending;
 215     },
 216
 217     // private
 218     setContainer : function(ct){
 219         /**
 220          * This monitorResize flag will be renamed soon as to avoid confusion
 221          * with the Container version which hooks onWindowResize to doLayout
 222          *
 223          * monitorResize flag in this context attaches the resize event between
 224          * a container and it's layout
 225          */
 226         if(this.monitorResize && ct != this.container){
 227             var old = this.container;
 228             if(old){
 229                 old.un(old.resizeEvent, this.onResize, this);
 230             }
 231             if(ct){
 232                 ct.on(ct.resizeEvent, this.onResize, this);
 233             }
 234         }
 235         this.container = ct;
 236     },
 237
 238     /**
 239      * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
 240      * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
 241      * @param {Number|String} v The encoded margins
 242      * @return {Object} An object with margin sizes for top, right, bottom and left
 243      */
 244     parseMargins : function(v){
 245         if (Ext.isNumber(v)) {
 246             v = v.toString();
 247         }
 248         var ms  = v.split(' '),
 249             len = ms.length;
 250
 251         if (len == 1) {
 252             ms[1] = ms[2] = ms[3] = ms[0];
 253         } else if(len == 2) {
 254             ms[2] = ms[0];
 255             ms[3] = ms[1];
 256         } else if(len == 3) {
 257             ms[3] = ms[1];
 258         }
 259
 260         return {
 261             top   :parseInt(ms[0], 10) || 0,
 262             right :parseInt(ms[1], 10) || 0,
 263             bottom:parseInt(ms[2], 10) || 0,
 264             left  :parseInt(ms[3], 10) || 0
 265         };
 266     },
 267
 268     /**
 269      * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
 270      * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
 271      * labeled and styled form Field. A default Template is supplied, but this may be
 272      * overriden to create custom field structures. The template processes values returned from
 273      * {@link Ext.layout.FormLayout#getTemplateArgs}.
 274      * @property fieldTpl
 275      * @type Ext.Template
 276      */
 277     fieldTpl: (function() {
 278         var t = new Ext.Template(
 279             '<div class="x-form-item {itemCls}" tabIndex="-1">',
 280                 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
 281                 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
 282                 '</div><div class="{clearCls}"></div>',
 283             '</div>'
 284         );
 285         t.disableFormats = true;
 286         return t.compile();
 287     })(),
 288
 289     /*
 290      * Destroys this layout. This is a template method that is empty by default, but should be implemented
 291      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
 292      * @protected
 293      */
 294     destroy : function(){
 295         // Stop any buffered layout tasks
 296         if(this.resizeTask && this.resizeTask.cancel){
 297             this.resizeTask.cancel();
 298         }
 299         if(!Ext.isEmpty(this.targetCls)){
 300             var target = this.container.getLayoutTarget();
 301             if(target){
 302                 target.removeClass(this.targetCls);
 303             }
 304         }
 305     }
 306 });