docs/source/Layout.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-layout-Layout'>/**
  19 </span> * @class Ext.layout.Layout
  20  * @extends Object
  21  * @private
  22  * Base Layout class - extended by ComponentLayout and ContainerLayout
  23  */
  24
  25 Ext.define('Ext.layout.Layout', {
  26
  27     /* Begin Definitions */
  28
  29     /* End Definitions */
  30
  31     isLayout: true,
  32     initialized: false,
  33
  34     statics: {
  35         create: function(layout, defaultType) {
  36             var type;
  37             if (layout instanceof Ext.layout.Layout) {
  38                 return Ext.createByAlias('layout.' + layout);
  39             } else {
  40                 if (Ext.isObject(layout)) {
  41                     type = layout.type;
  42                 }
  43                 else {
  44                     type = layout || defaultType;
  45                     layout = {};
  46                 }
  47                 return Ext.createByAlias('layout.' + type, layout || {});
  48             }
  49         }
  50     },
  51
  52     constructor : function(config) {
  53         this.id = Ext.id(null, this.type + '-');
  54         Ext.apply(this, config);
  55     },
  56
  57 <span id='Ext-layout-Layout-method-layout'>    /**
  58 </span>     * @private
  59      */
  60     layout : function() {
  61         var me = this;
  62         me.layoutBusy = true;
  63         me.initLayout();
  64
  65         if (me.beforeLayout.apply(me, arguments) !== false) {
  66             me.layoutCancelled = false;
  67             me.onLayout.apply(me, arguments);
  68             me.childrenChanged = false;
  69             me.owner.needsLayout = false;
  70             me.layoutBusy = false;
  71             me.afterLayout.apply(me, arguments);
  72         }
  73         else {
  74             me.layoutCancelled = true;
  75         }
  76         me.layoutBusy = false;
  77         me.doOwnerCtLayouts();
  78     },
  79
  80     beforeLayout : function() {
  81         this.renderItems(this.getLayoutItems(), this.getRenderTarget());
  82         return true;
  83     },
  84
  85 <span id='Ext-layout-Layout-method-renderItems'>    /**
  86 </span>     * @private
  87      * Iterates over all passed items, ensuring they are rendered.  If the items are already rendered,
  88      * also determines if the items are in the proper place dom.
  89      */
  90     renderItems : function(items, target) {
  91         var ln = items.length,
  92             i = 0,
  93             item;
  94
  95         for (; i &lt; ln; i++) {
  96             item = items[i];
  97             if (item &amp;&amp; !item.rendered) {
  98                 this.renderItem(item, target, i);
  99             }
 100             else if (!this.isValidParent(item, target, i)) {
 101                 this.moveItem(item, target, i);
 102             }
 103         }
 104     },
 105
 106     // @private - Validates item is in the proper place in the dom.
 107     isValidParent : function(item, target, position) {
 108         var dom = item.el ? item.el.dom : Ext.getDom(item);
 109         if (dom &amp;&amp; target &amp;&amp; target.dom) {
 110             if (Ext.isNumber(position) &amp;&amp; dom !== target.dom.childNodes[position]) {
 111                 return false;
 112             }
 113             return (dom.parentNode == (target.dom || target));
 114         }
 115         return false;
 116     },
 117
 118 <span id='Ext-layout-Layout-method-renderItem'>    /**
 119 </span>     * @private
 120      * Renders the given Component into the target Element.
 121      * @param {Ext.Component} item The Component to render
 122      * @param {Ext.core.Element} target The target Element
 123      * @param {Number} position The position within the target to render the item to
 124      */
 125     renderItem : function(item, target, position) {
 126         if (!item.rendered) {
 127             item.render(target, position);
 128             this.configureItem(item);
 129             this.childrenChanged = true;
 130         }
 131     },
 132
 133 <span id='Ext-layout-Layout-method-moveItem'>    /**
 134 </span>     * @private
 135      * Moved Component to the provided target instead.
 136      */
 137     moveItem : function(item, target, position) {
 138         // Make sure target is a dom element
 139         target = target.dom || target;
 140         if (typeof position == 'number') {
 141             position = target.childNodes[position];
 142         }
 143         target.insertBefore(item.el.dom, position || null);
 144         item.container = Ext.get(target);
 145         this.configureItem(item);
 146         this.childrenChanged = true;
 147     },
 148
 149 <span id='Ext-layout-Layout-method-initLayout'>    /**
 150 </span>     * @private
 151      * Adds the layout's targetCls if necessary and sets
 152      * initialized flag when complete.
 153      */
 154     initLayout : function() {
 155         if (!this.initialized &amp;&amp; !Ext.isEmpty(this.targetCls)) {
 156             this.getTarget().addCls(this.targetCls);
 157         }
 158         this.initialized = true;
 159     },
 160
 161     // @private Sets the layout owner
 162     setOwner : function(owner) {
 163         this.owner = owner;
 164     },
 165
 166     // @private - Returns empty array
 167     getLayoutItems : function() {
 168         return [];
 169     },
 170
 171 <span id='Ext-layout-Layout-method-configureItem'>    /**
 172 </span>     * @private
 173      * Applies itemCls
 174      */
 175     configureItem: function(item) {
 176         var me = this,
 177             el = item.el,
 178             owner = me.owner;
 179
 180         if (me.itemCls) {
 181             el.addCls(me.itemCls);
 182         }
 183         if (owner.itemCls) {
 184             el.addCls(owner.itemCls);
 185         }
 186     },
 187
 188     // Placeholder empty functions for subclasses to extend
 189     onLayout : Ext.emptyFn,
 190     afterLayout : Ext.emptyFn,
 191     onRemove : Ext.emptyFn,
 192     onDestroy : Ext.emptyFn,
 193     doOwnerCtLayouts : Ext.emptyFn,
 194
 195 <span id='Ext-layout-Layout-method-afterRemove'>    /**
 196 </span>     * @private
 197      * Removes itemCls
 198      */
 199     afterRemove : function(item) {
 200         var me = this,
 201             el = item.el,
 202             owner = me.owner;
 203
 204         if (item.rendered) {
 205             if (me.itemCls) {
 206                 el.removeCls(me.itemCls);
 207             }
 208             if (owner.itemCls) {
 209                 el.removeCls(owner.itemCls);
 210             }
 211         }
 212     },
 213
 214     /*
 215      * Destroys this layout. This is a template method that is empty by default, but should be implemented
 216      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
 217      * @protected
 218      */
 219     destroy : function() {
 220         if (!Ext.isEmpty(this.targetCls)) {
 221             var target = this.getTarget();
 222             if (target) {
 223                 target.removeCls(this.targetCls);
 224             }
 225         }
 226         this.onDestroy();
 227     }
 228 });</pre>
 229 </body>
 230 </html>