docs/source/ContainerLayout.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.layout.ContainerLayout"></div>/**
  15  * @class Ext.layout.ContainerLayout
  16  * <p>The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to
  17  * render any child Components when no <tt>{@link Ext.Container#layout layout}</tt> is configured into
  18  * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout
  19  * classes in Ext. It simply renders all child Components into the Container, performing no sizing or
  20  * positioning services. To utilize a layout that provides sizing and positioning of child Components,
  21  * specify an appropriate <tt>{@link Ext.Container#layout layout}</tt>.</p>
  22  * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
  23  * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  24  */
  25 Ext.layout.ContainerLayout = function(config){
  26     Ext.apply(this, config);
  27 };
  28
  29 Ext.layout.ContainerLayout.prototype = {
  30     <div id="cfg-Ext.layout.ContainerLayout-extraCls"></div>/**
  31      * @cfg {String} extraCls
  32      * <p>An optional extra CSS class that will be added to the container. This can be useful for adding
  33      * customized styles to the container or any of its children using standard CSS rules. See
  34      * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.</p>
  35      * <p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes
  36      * which assign a value by default:
  37      * <div class="mdetail-params"><ul>
  38      * <li>{@link Ext.layout.AbsoluteLayout Absolute Layout} : <tt>'x-abs-layout-item'</tt></li>
  39      * <li>{@link Ext.layout.Box Box Layout} : <tt>'x-box-item'</tt></li>
  40      * <li>{@link Ext.layout.ColumnLayout Column Layout} : <tt>'x-column'</tt></li>
  41      * </ul></div>
  42      * To configure the above Classes with an extra CSS class append to the default.  For example,
  43      * for ColumnLayout:<pre><code>
  44      * extraCls: 'x-column custom-class'
  45      * </code></pre>
  46      * </p>
  47      */
  48     <div id="cfg-Ext.layout.ContainerLayout-renderHidden"></div>/**
  49      * @cfg {Boolean} renderHidden
  50      * True to hide each contained item on render (defaults to false).
  51      */
  52
  53     <div id="prop-Ext.layout.ContainerLayout-activeItem"></div>/**
  54      * A reference to the {@link Ext.Component} that is active.  For example, <pre><code>
  55      * if(myPanel.layout.activeItem.id == 'item-1') { ... }
  56      * </code></pre>
  57      * <tt>activeItem</tt> only applies to layout styles that can display items one at a time
  58      * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout}
  59      * and {@link Ext.layout.FitLayout}).  Read-only.  Related to {@link Ext.Container#activeItem}.
  60      * @type {Ext.Component}
  61      * @property activeItem
  62      */
  63
  64     // private
  65     monitorResize:false,
  66     // private
  67     activeItem : null,
  68
  69     // private
  70     layout : function(){
  71         var target = this.container.getLayoutTarget();
  72         this.onLayout(this.container, target);
  73         this.container.fireEvent('afterlayout', this.container, this);
  74     },
  75
  76     // private
  77     onLayout : function(ct, target){
  78         this.renderAll(ct, target);
  79     },
  80
  81     // private
  82     isValidParent : function(c, target){
  83                 return target && c.getDomPositionEl().dom.parentNode == (target.dom || target);
  84     },
  85
  86     // private
  87     renderAll : function(ct, target){
  88         var items = ct.items.items;
  89         for(var i = 0, len = items.length; i < len; i++) {
  90             var c = items[i];
  91             if(c && (!c.rendered || !this.isValidParent(c, target))){
  92                 this.renderItem(c, i, target);
  93             }
  94         }
  95     },
  96
  97     // private
  98     renderItem : function(c, position, target){
  99         if(c && !c.rendered){
 100             c.render(target, position);
 101             this.configureItem(c, position);
 102         }else if(c && !this.isValidParent(c, target)){
 103             if(Ext.isNumber(position)){
 104                 position = target.dom.childNodes[position];
 105             }
 106             target.dom.insertBefore(c.getDomPositionEl().dom, position || null);
 107             c.container = target;
 108             this.configureItem(c, position);
 109         }
 110     },
 111
 112     // private
 113     configureItem: function(c, position){
 114         if(this.extraCls){
 115             var t = c.getPositionEl ? c.getPositionEl() : c;
 116             t.addClass(this.extraCls);
 117         }
 118         if (this.renderHidden && c != this.activeItem) {
 119             c.hide();
 120         }
 121         if(c.doLayout && this.forceLayout){
 122             c.doLayout(false, true);
 123         }
 124     },
 125
 126     onRemove: function(c){
 127          if(this.activeItem == c){
 128             delete this.activeItem;
 129          }
 130          if(c.rendered && this.extraCls){
 131             var t = c.getPositionEl ? c.getPositionEl() : c;
 132             t.removeClass(this.extraCls);
 133         }
 134     },
 135
 136     // private
 137     onResize: function(){
 138         var ct = this.container,
 139             b;
 140
 141         if(ct.collapsed){
 142             return;
 143         }
 144         if(b = ct.bufferResize){
 145             // Only allow if we should buffer the layout
 146             if(ct.shouldBufferLayout()){
 147                 if(!this.resizeTask){
 148                     this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
 149                     this.resizeBuffer = Ext.isNumber(b) ? b : 50;
 150                 }
 151                 ct.layoutPending = true;
 152                 this.resizeTask.delay(this.resizeBuffer);
 153             }
 154         }else{
 155             ct.doLayout();
 156         }
 157     },
 158
 159     // private
 160     runLayout: function(){
 161         var ct = this.container;
 162         ct.doLayout();
 163         delete ct.layoutPending;
 164     },
 165
 166     // private
 167     setContainer : function(ct){
 168         if(this.monitorResize && ct != this.container){
 169             var old = this.container;
 170             if(old){
 171                 old.un(old.resizeEvent, this.onResize, this);
 172             }
 173             if(ct){
 174                 ct.on(ct.resizeEvent, this.onResize, this);
 175             }
 176         }
 177         this.container = ct;
 178     },
 179
 180     // private
 181     parseMargins : function(v){
 182         if(Ext.isNumber(v)){
 183             v = v.toString();
 184         }
 185         var ms = v.split(' ');
 186         var len = ms.length;
 187         if(len == 1){
 188             ms[1] = ms[0];
 189             ms[2] = ms[0];
 190             ms[3] = ms[0];
 191         }
 192         if(len == 2){
 193             ms[2] = ms[0];
 194             ms[3] = ms[1];
 195         }
 196         if(len == 3){
 197             ms[3] = ms[1];
 198         }
 199         return {
 200             top:parseInt(ms[0], 10) || 0,
 201             right:parseInt(ms[1], 10) || 0,
 202             bottom:parseInt(ms[2], 10) || 0,
 203             left:parseInt(ms[3], 10) || 0
 204         };
 205     },
 206
 207     <div id="prop-Ext.layout.ContainerLayout-fieldTpl"></div>/**
 208      * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
 209      * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
 210      * labeled and styled form Field. A default Template is supplied, but this may be
 211      * overriden to create custom field structures. The template processes values returned from
 212      * {@link Ext.layout.FormLayout#getTemplateArgs}.
 213      * @property fieldTpl
 214      * @type Ext.Template
 215      */
 216     fieldTpl: (function() {
 217         var t = new Ext.Template(
 218             '<div class="x-form-item {itemCls}" tabIndex="-1">',
 219                 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
 220                 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
 221                 '</div><div class="{clearCls}"></div>',
 222             '</div>'
 223         );
 224         t.disableFormats = true;
 225         return t.compile();
 226     })(),
 227
 228     /*
 229      * Destroys this layout. This is a template method that is empty by default, but should be implemented
 230      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
 231      * @protected
 232      */
 233     destroy : Ext.emptyFn
 234 };
 235 Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;</pre>
 236 </body>
 237 </html>