docs/source/ContainerLayout.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 <div id="cls-Ext.layout.ContainerLayout"></div>/**
  16  * @class Ext.layout.ContainerLayout
  17  * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
  18  * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  19  */
  20 Ext.layout.ContainerLayout = Ext.extend(Object, {
  21     <div id="cfg-Ext.layout.ContainerLayout-extraCls"></div>/**
  22      * @cfg {String} extraCls
  23      * <p>An optional extra CSS class that will be added to the container. This can be useful for adding
  24      * customized styles to the container or any of its children using standard CSS rules. See
  25      * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.</p>
  26      * <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
  27      * which assign a value by default:
  28      * <div class="mdetail-params"><ul>
  29      * <li>{@link Ext.layout.AbsoluteLayout Absolute Layout} : <tt>'x-abs-layout-item'</tt></li>
  30      * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-item'</tt></li>
  31      * <li>{@link Ext.layout.ColumnLayout Column Layout} : <tt>'x-column'</tt></li>
  32      * </ul></div>
  33      * To configure the above Classes with an extra CSS class append to the default.  For example,
  34      * for ColumnLayout:<pre><code>
  35      * extraCls: 'x-column custom-class'
  36      * </code></pre>
  37      * </p>
  38      */
  39     <div id="cfg-Ext.layout.ContainerLayout-renderHidden"></div>/**
  40      * @cfg {Boolean} renderHidden
  41      * True to hide each contained item on render (defaults to false).
  42      */
  43
  44     <div id="prop-Ext.layout.ContainerLayout-activeItem"></div>/**
  45      * A reference to the {@link Ext.Component} that is active.  For example, <pre><code>
  46      * if(myPanel.layout.activeItem.id == 'item-1') { ... }
  47      * </code></pre>
  48      * <tt>activeItem</tt> only applies to layout styles that can display items one at a time
  49      * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
  50      * and {@link Ext.layout.FitLayout}).  Read-only.  Related to {@link Ext.Container#activeItem}.
  51      * @type {Ext.Component}
  52      * @property activeItem
  53      */
  54
  55     // private
  56     monitorResize:false,
  57     // private
  58     activeItem : null,
  59
  60     constructor : function(config){
  61         this.id = Ext.id(null, 'ext-layout-');
  62         Ext.apply(this, config);
  63     },
  64
  65     type: 'container',
  66
  67     /* Workaround for how IE measures autoWidth elements.  It prefers bottom-up measurements
  68       whereas other browser prefer top-down.  We will hide all target child elements before we measure and
  69       put them back to get an accurate measurement.
  70     */
  71     IEMeasureHack : function(target, viewFlag) {
  72         var tChildren = target.dom.childNodes, tLen = tChildren.length, c, d = [], e, i, ret;
  73         for (i = 0 ; i < tLen ; i++) {
  74             c = tChildren[i];
  75             e = Ext.get(c);
  76             if (e) {
  77                 d[i] = e.getStyle('display');
  78                 e.setStyle({display: 'none'});
  79             }
  80         }
  81         ret = target ? target.getViewSize(viewFlag) : {};
  82         for (i = 0 ; i < tLen ; i++) {
  83             c = tChildren[i];
  84             e = Ext.get(c);
  85             if (e) {
  86                 e.setStyle({display: d[i]});
  87             }
  88         }
  89         return ret;
  90     },
  91
  92     // Placeholder for the derived layouts
  93     getLayoutTargetSize : Ext.EmptyFn,
  94
  95     // private
  96     layout : function(){
  97         var ct = this.container, target = ct.getLayoutTarget();
  98         if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
  99             target.addClass(this.targetCls);
 100         }
 101         this.onLayout(ct, target);
 102         ct.fireEvent('afterlayout', ct, this);
 103     },
 104
 105     // private
 106     onLayout : function(ct, target){
 107         this.renderAll(ct, target);
 108     },
 109
 110     // private
 111     isValidParent : function(c, target){
 112         return target && c.getPositionEl().dom.parentNode == (target.dom || target);
 113     },
 114
 115     // private
 116     renderAll : function(ct, target){
 117         var items = ct.items.items, i, c, len = items.length;
 118         for(i = 0; i < len; i++) {
 119             c = items[i];
 120             if(c && (!c.rendered || !this.isValidParent(c, target))){
 121                 this.renderItem(c, i, target);
 122             }
 123         }
 124     },
 125
 126     /**
 127      * @private
 128      * Renders the given Component into the target Element. If the Component is already rendered,
 129      * it is moved to the provided target instead.
 130      * @param {Ext.Component} c The Component to render
 131      * @param {Number} position The position within the target to render the item to
 132      * @param {Ext.Element} target The target Element
 133      */
 134     renderItem : function(c, position, target){
 135         if (c) {
 136             if (!c.rendered) {
 137                 c.render(target, position);
 138                 this.configureItem(c);
 139             } else if (!this.isValidParent(c, target)) {
 140                 if (Ext.isNumber(position)) {
 141                     position = target.dom.childNodes[position];
 142                 }
 143
 144                 target.dom.insertBefore(c.getPositionEl().dom, position || null);
 145                 c.container = target;
 146                 this.configureItem(c);
 147             }
 148         }
 149     },
 150
 151     // private.
 152     // Get all rendered items to lay out.
 153     getRenderedItems: function(ct){
 154         var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = [];
 155         for (i = 0; i < len; i++) {
 156             if((c = cti[i]).rendered && this.isValidParent(c, t) && c.shouldLayout !== false){
 157                 items.push(c);
 158             }
 159         };
 160         return items;
 161     },
 162
 163     /**
 164      * @private
 165      * Applies extraCls and hides the item if renderHidden is true
 166      */
 167     configureItem: function(c){
 168         if (this.extraCls) {
 169             var t = c.getPositionEl ? c.getPositionEl() : c;
 170             t.addClass(this.extraCls);
 171         }
 172
 173         // If we are forcing a layout, do so *before* we hide so elements have height/width
 174         if (c.doLayout && this.forceLayout) {
 175             c.doLayout();
 176         }
 177         if (this.renderHidden && c != this.activeItem) {
 178             c.hide();
 179         }
 180     },
 181
 182     onRemove: function(c){
 183         if(this.activeItem == c){
 184             delete this.activeItem;
 185         }
 186         if(c.rendered && this.extraCls){
 187             var t = c.getPositionEl ? c.getPositionEl() : c;
 188             t.removeClass(this.extraCls);
 189         }
 190     },
 191
 192     afterRemove: function(c){
 193         if(c.removeRestore){
 194             c.removeMode = 'container';
 195             delete c.removeRestore;
 196         }
 197     },
 198
 199     // private
 200     onResize: function(){
 201         var ct = this.container,
 202             b;
 203         if(ct.collapsed){
 204             return;
 205         }
 206         if(b = ct.bufferResize && ct.shouldBufferLayout()){
 207             if(!this.resizeTask){
 208                 this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
 209                 this.resizeBuffer = Ext.isNumber(b) ? b : 50;
 210             }
 211             ct.layoutPending = true;
 212             this.resizeTask.delay(this.resizeBuffer);
 213         }else{
 214             this.runLayout();
 215         }
 216     },
 217
 218     runLayout: function(){
 219         var ct = this.container;
 220         this.layout();
 221         ct.onLayout();
 222         delete ct.layoutPending;
 223     },
 224
 225     // private
 226     setContainer : function(ct){
 227         <div id="prop-Ext.layout.ContainerLayout-if"></div>/**
 228          * This monitorResize flag will be renamed soon as to avoid confusion
 229          * with the Container version which hooks onWindowResize to doLayout
 230          *
 231          * monitorResize flag in this context attaches the resize event between
 232          * a container and it's layout
 233          */
 234         if(this.monitorResize && ct != this.container){
 235             var old = this.container;
 236             if(old){
 237                 old.un(old.resizeEvent, this.onResize, this);
 238             }
 239             if(ct){
 240                 ct.on(ct.resizeEvent, this.onResize, this);
 241             }
 242         }
 243         this.container = ct;
 244     },
 245
 246     <div id="method-Ext.layout.ContainerLayout-parseMargins"></div>/**
 247      * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
 248      * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
 249      * @param {Number|String} v The encoded margins
 250      * @return {Object} An object with margin sizes for top, right, bottom and left
 251      */
 252     parseMargins : function(v){
 253         if (Ext.isNumber(v)) {
 254             v = v.toString();
 255         }
 256         var ms  = v.split(' '),
 257             len = ms.length;
 258
 259         if (len == 1) {
 260             ms[1] = ms[2] = ms[3] = ms[0];
 261         } else if(len == 2) {
 262             ms[2] = ms[0];
 263             ms[3] = ms[1];
 264         } else if(len == 3) {
 265             ms[3] = ms[1];
 266         }
 267
 268         return {
 269             top   :parseInt(ms[0], 10) || 0,
 270             right :parseInt(ms[1], 10) || 0,
 271             bottom:parseInt(ms[2], 10) || 0,
 272             left  :parseInt(ms[3], 10) || 0
 273         };
 274     },
 275
 276     <div id="prop-Ext.layout.ContainerLayout-fieldTpl"></div>/**
 277      * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
 278      * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
 279      * labeled and styled form Field. A default Template is supplied, but this may be
 280      * overriden to create custom field structures. The template processes values returned from
 281      * {@link Ext.layout.FormLayout#getTemplateArgs}.
 282      * @property fieldTpl
 283      * @type Ext.Template
 284      */
 285     fieldTpl: (function() {
 286         var t = new Ext.Template(
 287             '<div class="x-form-item {itemCls}" tabIndex="-1">',
 288                 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
 289                 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
 290                 '</div><div class="{clearCls}"></div>',
 291             '</div>'
 292         );
 293         t.disableFormats = true;
 294         return t.compile();
 295     })(),
 296
 297     /*
 298      * Destroys this layout. This is a template method that is empty by default, but should be implemented
 299      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
 300      * @protected
 301      */
 302     destroy : function(){
 303         // Stop any buffered layout tasks
 304         if(this.resizeTask && this.resizeTask.cancel){
 305             this.resizeTask.cancel();
 306         }
 307         if(this.container) {
 308             this.container.un(this.container.resizeEvent, this.onResize, this);
 309         }
 310         if(!Ext.isEmpty(this.targetCls)){
 311             var target = this.container.getLayoutTarget();
 312             if(target){
 313                 target.removeClass(this.targetCls);
 314             }
 315         }
 316     }
 317 });</pre>
 318 </body>
 319 </html>