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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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> * Base Layout class - extended by ComponentLayout and ContainerLayout
  20  */
  21 Ext.define('Ext.layout.Layout', {
  22
  23     /* Begin Definitions */
  24
  25     /* End Definitions */
  26
  27     isLayout: true,
  28     initialized: false,
  29
  30     statics: {
  31         create: function(layout, defaultType) {
  32             var type;
  33             if (layout instanceof Ext.layout.Layout) {
  34                 return Ext.createByAlias('layout.' + layout);
  35             } else {
  36                 if (!layout || typeof layout === 'string') {
  37                     type = layout || defaultType;
  38                     layout = {};
  39                 }
  40                 else {
  41                     type = layout.type || defaultType;
  42                 }
  43                 return Ext.createByAlias('layout.' + type, layout || {});
  44             }
  45         }
  46     },
  47
  48     constructor : function(config) {
  49         this.id = Ext.id(null, this.type + '-');
  50         Ext.apply(this, config);
  51     },
  52
  53 <span id='Ext-layout-Layout-method-layout'>    /**
  54 </span>     * @private
  55      */
  56     layout : function() {
  57         var me = this;
  58         me.layoutBusy = true;
  59         me.initLayout();
  60
  61         if (me.beforeLayout.apply(me, arguments) !== false) {
  62             me.layoutCancelled = false;
  63             me.onLayout.apply(me, arguments);
  64             me.childrenChanged = false;
  65             me.owner.needsLayout = false;
  66             me.layoutBusy = false;
  67             me.afterLayout.apply(me, arguments);
  68         }
  69         else {
  70             me.layoutCancelled = true;
  71         }
  72         me.layoutBusy = false;
  73         me.doOwnerCtLayouts();
  74     },
  75
  76     beforeLayout : function() {
  77         this.renderChildren();
  78         return true;
  79     },
  80
  81     renderChildren: function () {
  82         this.renderItems(this.getLayoutItems(), this.getRenderTarget());
  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 me = this,
  92             ln = items.length,
  93             i = 0,
  94             item;
  95
  96         for (; i &lt; ln; i++) {
  97             item = items[i];
  98             if (item &amp;&amp; !item.rendered) {
  99                 me.renderItem(item, target, i);
 100             } else if (!me.isValidParent(item, target, i)) {
 101                 me.moveItem(item, target, i);
 102             } else {
 103                 // still need to configure the item, it may have moved in the container.
 104                 me.configureItem(item);
 105             }
 106         }
 107     },
 108
 109     // @private - Validates item is in the proper place in the dom.
 110     isValidParent : function(item, target, position) {
 111         var dom = item.el ? item.el.dom : Ext.getDom(item);
 112         if (dom &amp;&amp; target &amp;&amp; target.dom) {
 113             if (Ext.isNumber(position) &amp;&amp; dom !== target.dom.childNodes[position]) {
 114                 return false;
 115             }
 116             return (dom.parentNode == (target.dom || target));
 117         }
 118         return false;
 119     },
 120
 121 <span id='Ext-layout-Layout-method-renderItem'>    /**
 122 </span>     * @private
 123      * Renders the given Component into the target Element.
 124      * @param {Ext.Component} item The Component to render
 125      * @param {Ext.Element} target The target Element
 126      * @param {Number} position The position within the target to render the item to
 127      */
 128     renderItem : function(item, target, position) {
 129         var me = this;
 130         if (!item.rendered) {
 131             if (me.itemCls) {
 132                 item.addCls(me.itemCls);
 133             }
 134             if (me.owner.itemCls) {
 135                 item.addCls(me.owner.itemCls);
 136             }
 137             item.render(target, position);
 138             me.configureItem(item);
 139             me.childrenChanged = true;
 140         }
 141     },
 142
 143 <span id='Ext-layout-Layout-method-moveItem'>    /**
 144 </span>     * @private
 145      * Moved Component to the provided target instead.
 146      */
 147     moveItem : function(item, target, position) {
 148         // Make sure target is a dom element
 149         target = target.dom || target;
 150         if (typeof position == 'number') {
 151             position = target.childNodes[position];
 152         }
 153         target.insertBefore(item.el.dom, position || null);
 154         item.container = Ext.get(target);
 155         this.configureItem(item);
 156         this.childrenChanged = true;
 157     },
 158
 159 <span id='Ext-layout-Layout-method-initLayout'>    /**
 160 </span>     * @private
 161      * Adds the layout's targetCls if necessary and sets
 162      * initialized flag when complete.
 163      */
 164     initLayout : function() {
 165         var me = this,
 166             targetCls = me.targetCls;
 167
 168         if (!me.initialized &amp;&amp; !Ext.isEmpty(targetCls)) {
 169             me.getTarget().addCls(targetCls);
 170         }
 171         me.initialized = true;
 172     },
 173
 174     // @private Sets the layout owner
 175     setOwner : function(owner) {
 176         this.owner = owner;
 177     },
 178
 179     // @private - Returns empty array
 180     getLayoutItems : function() {
 181         return [];
 182     },
 183
 184 <span id='Ext-layout-Layout-property-configureItem'>    /**
 185 </span>     * @private
 186      * Applies itemCls
 187      * Empty template method
 188      */
 189     configureItem: Ext.emptyFn,
 190
 191     // Placeholder empty functions for subclasses to extend
 192     onLayout : Ext.emptyFn,
 193     afterLayout : Ext.emptyFn,
 194     onRemove : Ext.emptyFn,
 195     onDestroy : Ext.emptyFn,
 196     doOwnerCtLayouts : Ext.emptyFn,
 197
 198 <span id='Ext-layout-Layout-method-afterRemove'>    /**
 199 </span>     * @private
 200      * Removes itemCls
 201      */
 202     afterRemove : function(item) {
 203         var el = item.el,
 204             owner = this.owner,
 205             itemCls = this.itemCls,
 206             ownerCls = owner.itemCls;
 207
 208         // Clear managed dimensions flag when removed from the layout.
 209         if (item.rendered &amp;&amp; !item.isDestroyed) {
 210             if (itemCls) {
 211                 el.removeCls(itemCls);
 212             }
 213             if (ownerCls) {
 214                 el.removeCls(ownerCls);
 215             }
 216         }
 217
 218         // These flags are set at the time a child item is added to a layout.
 219         // The layout must decide if it is managing the item's width, or its height, or both.
 220         // See AbstractComponent for docs on these properties.
 221         delete item.layoutManagedWidth;
 222         delete item.layoutManagedHeight;
 223     },
 224
 225 <span id='Ext-layout-Layout-method-destroy'>    /**
 226 </span>     * Destroys this layout. This is a template method that is empty by default, but should be implemented
 227      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
 228      * @template
 229      */
 230     destroy : function() {
 231         var targetCls = this.targetCls,
 232             target;
 233
 234         if (!Ext.isEmpty(targetCls)) {
 235             target = this.getTarget();
 236             if (target) {
 237                 target.removeCls(targetCls);
 238             }
 239         }
 240         this.onDestroy();
 241     }
 242 });</pre>
 243 </body>
 244 </html>