2 * @class Ext.layout.Layout
5 * Base Layout class - extended by ComponentLayout and ContainerLayout
8 Ext.define('Ext.layout.Layout', {
10 /* Begin Definitions */
18 create: function(layout, defaultType) {
20 if (layout instanceof Ext.layout.Layout) {
21 return Ext.createByAlias('layout.' + layout);
23 if (Ext.isObject(layout)) {
27 type = layout || defaultType;
30 return Ext.createByAlias('layout.' + type, layout || {});
35 constructor : function(config) {
36 this.id = Ext.id(null, this.type + '-');
37 Ext.apply(this, config);
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);
57 me.layoutCancelled = true;
59 me.layoutBusy = false;
60 me.doOwnerCtLayouts();
63 beforeLayout : function() {
64 this.renderItems(this.getLayoutItems(), this.getRenderTarget());
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.
73 renderItems : function(items, target) {
74 var ln = items.length,
80 if (item && !item.rendered) {
81 this.renderItem(item, target, i);
83 else if (!this.isValidParent(item, target, i)) {
84 this.moveItem(item, target, i);
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 && target && target.dom) {
93 if (Ext.isNumber(position) && dom !== target.dom.childNodes[position]) {
96 return (dom.parentNode == (target.dom || target));
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
108 renderItem : function(item, target, position) {
109 if (!item.rendered) {
110 item.render(target, position);
111 this.configureItem(item);
112 this.childrenChanged = true;
118 * Moved Component to the provided target instead.
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];
126 target.insertBefore(item.el.dom, position || null);
127 item.container = Ext.get(target);
128 this.configureItem(item);
129 this.childrenChanged = true;
134 * Adds the layout's targetCls if necessary and sets
135 * initialized flag when complete.
137 initLayout : function() {
138 if (!this.initialized && !Ext.isEmpty(this.targetCls)) {
139 this.getTarget().addCls(this.targetCls);
141 this.initialized = true;
144 // @private Sets the layout owner
145 setOwner : function(owner) {
149 // @private - Returns empty array
150 getLayoutItems : function() {
158 configureItem: function(item) {
164 el.addCls(me.itemCls);
167 el.addCls(owner.itemCls);
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,
182 afterRemove : function(item) {
189 el.removeCls(me.itemCls);
192 el.removeCls(owner.itemCls);
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.
202 destroy : function() {
203 if (!Ext.isEmpty(this.targetCls)) {
204 var target = this.getTarget();
206 target.removeCls(this.targetCls);