3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * Base Layout class - extended by ComponentLayout and ContainerLayout
18 Ext.define('Ext.layout.Layout', {
20 /* Begin Definitions */
28 create: function(layout, defaultType) {
30 if (layout instanceof Ext.layout.Layout) {
31 return Ext.createByAlias('layout.' + layout);
33 if (!layout || typeof layout === 'string') {
34 type = layout || defaultType;
38 type = layout.type || defaultType;
40 return Ext.createByAlias('layout.' + type, layout || {});
45 constructor : function(config) {
46 this.id = Ext.id(null, this.type + '-');
47 Ext.apply(this, config);
58 if (me.beforeLayout.apply(me, arguments) !== false) {
59 me.layoutCancelled = false;
60 me.onLayout.apply(me, arguments);
61 me.childrenChanged = false;
62 me.owner.needsLayout = false;
63 me.layoutBusy = false;
64 me.afterLayout.apply(me, arguments);
67 me.layoutCancelled = true;
69 me.layoutBusy = false;
70 me.doOwnerCtLayouts();
73 beforeLayout : function() {
74 this.renderChildren();
78 renderChildren: function () {
79 this.renderItems(this.getLayoutItems(), this.getRenderTarget());
84 * Iterates over all passed items, ensuring they are rendered. If the items are already rendered,
85 * also determines if the items are in the proper place dom.
87 renderItems : function(items, target) {
95 if (item && !item.rendered) {
96 me.renderItem(item, target, i);
97 } else if (!me.isValidParent(item, target, i)) {
98 me.moveItem(item, target, i);
100 // still need to configure the item, it may have moved in the container.
101 me.configureItem(item);
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 && target && target.dom) {
110 if (Ext.isNumber(position) && dom !== target.dom.childNodes[position]) {
113 return (dom.parentNode == (target.dom || target));
120 * Renders the given Component into the target Element.
121 * @param {Ext.Component} item The Component to render
122 * @param {Ext.Element} target The target Element
123 * @param {Number} position The position within the target to render the item to
125 renderItem : function(item, target, position) {
127 if (!item.rendered) {
129 item.addCls(me.itemCls);
131 if (me.owner.itemCls) {
132 item.addCls(me.owner.itemCls);
134 item.render(target, position);
135 me.configureItem(item);
136 me.childrenChanged = true;
142 * Moved Component to the provided target instead.
144 moveItem : function(item, target, position) {
145 // Make sure target is a dom element
146 target = target.dom || target;
147 if (typeof position == 'number') {
148 position = target.childNodes[position];
150 target.insertBefore(item.el.dom, position || null);
151 item.container = Ext.get(target);
152 this.configureItem(item);
153 this.childrenChanged = true;
158 * Adds the layout's targetCls if necessary and sets
159 * initialized flag when complete.
161 initLayout : function() {
163 targetCls = me.targetCls;
165 if (!me.initialized && !Ext.isEmpty(targetCls)) {
166 me.getTarget().addCls(targetCls);
168 me.initialized = true;
171 // @private Sets the layout owner
172 setOwner : function(owner) {
176 // @private - Returns empty array
177 getLayoutItems : function() {
184 * Empty template method
186 configureItem: Ext.emptyFn,
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,
199 afterRemove : function(item) {
202 itemCls = this.itemCls,
203 ownerCls = owner.itemCls;
205 // Clear managed dimensions flag when removed from the layout.
206 if (item.rendered && !item.isDestroyed) {
208 el.removeCls(itemCls);
211 el.removeCls(ownerCls);
215 // These flags are set at the time a child item is added to a layout.
216 // The layout must decide if it is managing the item's width, or its height, or both.
217 // See AbstractComponent for docs on these properties.
218 delete item.layoutManagedWidth;
219 delete item.layoutManagedHeight;
223 * Destroys this layout. This is a template method that is empty by default, but should be implemented
224 * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
227 destroy : function() {
228 var targetCls = this.targetCls,
231 if (!Ext.isEmpty(targetCls)) {
232 target = this.getTarget();
234 target.removeCls(targetCls);