docs/source/ContainerLayout.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.layout.ContainerLayout"></div>/**
  10  * @class Ext.layout.ContainerLayout
  11  * <p>The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to
  12  * render any child Components when no <tt>{@link Ext.Container#layout layout}</tt> is configured into
  13  * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout
  14  * classes in Ext. It simply renders all child Components into the Container, performing no sizing or
  15  * positioning services. To utilize a layout that provides sizing and positioning of child Components,
  16  * specify an appropriate <tt>{@link Ext.Container#layout layout}</tt>.</p>
  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         Ext.apply(this, config);
  62     },
  63
  64     // private
  65     layout : function(){
  66         var target = this.container.getLayoutTarget();
  67         if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
  68             target.addClass(this.targetCls)
  69         }
  70         this.onLayout(this.container, target);
  71         this.container.fireEvent('afterlayout', this.container, this);
  72         this.hasLayout = true;
  73     },
  74
  75     // private
  76     onLayout : function(ct, target){
  77         this.renderAll(ct, target);
  78     },
  79
  80     // private
  81     isValidParent : function(c, target){
  82         return target && c.getPositionEl().dom.parentNode == (target.dom || target);
  83     },
  84
  85     // private
  86     renderAll : function(ct, target){
  87         var items = ct.items.items;
  88         for(var i = 0, len = items.length; i < len; i++) {
  89             var c = items[i];
  90             if(c && (!c.rendered || !this.isValidParent(c, target))){
  91                 this.renderItem(c, i, target);
  92             }
  93         }
  94     },
  95
  96     // private
  97     renderItem : function(c, position, target){
  98         if(c && !c.rendered){
  99             c.render(target, position);
 100             this.configureItem(c, position);
 101         }else if(c && !this.isValidParent(c, target)){
 102             if(Ext.isNumber(position)){
 103                 position = target.dom.childNodes[position];
 104             }
 105             target.dom.insertBefore(c.getPositionEl().dom, position || null);
 106             c.container = target;
 107             this.configureItem(c, position);
 108         }
 109     },
 110
 111     // private
 112     configureItem: function(c, position){
 113         if(this.extraCls){
 114             var t = c.getPositionEl ? c.getPositionEl() : c;
 115             t.addClass(this.extraCls);
 116         }
 117         // If we are forcing a layout, do so *before* we hide so elements have height/width
 118         if(c.doLayout && this.forceLayout){
 119             c.doLayout(false, true);
 120         }
 121         if (this.renderHidden && c != this.activeItem) {
 122             c.hide();
 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 = ct.bufferResize;
 140
 141         if (ct.collapsed){
 142             return;
 143         }
 144
 145         // Not having an ownerCt negates the buffering: floating and top level
 146         // Containers (Viewport, Window, ToolTip, Menu) need to lay out ASAP.
 147         if (b && ct.ownerCt) {
 148             // If we do NOT already have a layout pending from an ancestor, schedule one.
 149             // If there is a layout pending, we do nothing here.
 150             // buffering to be deprecated soon
 151             if (!ct.hasLayoutPending()){
 152                 if(!this.resizeTask){
 153                     this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
 154                     this.resizeBuffer = Ext.isNumber(b) ? b : 50;
 155                 }
 156                 ct.layoutPending = true;
 157                 this.resizeTask.delay(this.resizeBuffer);
 158             }
 159         }else{
 160             ct.doLayout(false, this.forceLayout);
 161         }
 162     },
 163
 164     // private
 165     runLayout: function(){
 166         var ct = this.container;
 167         ct.doLayout();
 168         delete ct.layoutPending;
 169     },
 170
 171     // private
 172     setContainer : function(ct){
 173         // No longer use events to handle resize. Instead this will be handled through a direct function call.
 174         /*
 175         if(this.monitorResize && ct != this.container){
 176             var old = this.container;
 177             if(old){
 178                 old.un(old.resizeEvent, this.onResize, this);
 179             }
 180             if(ct){
 181                 ct.on(ct.resizeEvent, this.onResize, this);
 182             }
 183         }
 184         */
 185         this.container = ct;
 186     },
 187
 188     // private
 189     parseMargins : function(v){
 190         if(Ext.isNumber(v)){
 191             v = v.toString();
 192         }
 193         var ms = v.split(' ');
 194         var len = ms.length;
 195         if(len == 1){
 196             ms[1] = ms[0];
 197             ms[2] = ms[0];
 198             ms[3] = ms[0];
 199         }
 200         if(len == 2){
 201             ms[2] = ms[0];
 202             ms[3] = ms[1];
 203         }
 204         if(len == 3){
 205             ms[3] = ms[1];
 206         }
 207         return {
 208             top:parseInt(ms[0], 10) || 0,
 209             right:parseInt(ms[1], 10) || 0,
 210             bottom:parseInt(ms[2], 10) || 0,
 211             left:parseInt(ms[3], 10) || 0
 212         };
 213     },
 214
 215     <div id="prop-Ext.layout.ContainerLayout-fieldTpl"></div>/**
 216      * The {@link Ext.Template Ext.Template} used by Field rendering layout classes (such as
 217      * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped,
 218      * labeled and styled form Field. A default Template is supplied, but this may be
 219      * overriden to create custom field structures. The template processes values returned from
 220      * {@link Ext.layout.FormLayout#getTemplateArgs}.
 221      * @property fieldTpl
 222      * @type Ext.Template
 223      */
 224     fieldTpl: (function() {
 225         var t = new Ext.Template(
 226             '<div class="x-form-item {itemCls}" tabIndex="-1">',
 227                 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
 228                 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
 229                 '</div><div class="{clearCls}"></div>',
 230             '</div>'
 231         );
 232         t.disableFormats = true;
 233         return t.compile();
 234     })(),
 235
 236     /*
 237      * Destroys this layout. This is a template method that is empty by default, but should be implemented
 238      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
 239      * @protected
 240      */
 241     destroy : function(){
 242         if(!Ext.isEmpty(this.targetCls)){
 243             var target = this.container.getLayoutTarget();
 244             if(target){
 245                 target.removeClass(this.targetCls);
 246             }
 247         }
 248     }
 249 });
 250 Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;
 251 </pre>    \r
 252 </body>\r
 253 </html>