docs/source/Layout.html

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