docs/source/ContainerLayout.html

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