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