/** * */Ext.define('Ext.layout.wrapper.Dock', { requires: [ 'Ext.util.Wrapper' ], config: { direction: 'horizontal', element: { className: 'x-dock' }, bodyElement: { className: 'x-dock-body' }, innerWrapper: null, sizeState: false, container: null }, positionMap: { top: 'start', left: 'start', bottom: 'end', right: 'end' }, constructor: function(config) { this.items = { start: [], end: [] }; this.itemsCount = 0; this.initConfig(config); }, addItems: function(items) { var i, ln, item; for (i = 0, ln = items.length; i < ln; i++) { item = items[i]; this.addItem(item); } }, addItem: function(item) { var docked = item.getDocked(), position = this.positionMap[docked], wrapper = item.$dockWrapper, container = this.getContainer(), index = container.indexOf(item), items = this.items, sideItems = items[position], itemWrapper, element, i, ln, sibling, referenceElement, siblingIndex; if (wrapper) { wrapper.removeItem(item); } item.$dockWrapper = this; itemWrapper = item.link('$dockItemWrapper', new Ext.util.Wrapper({ className: 'x-dock-item' })); item.addCls('x-docked-' + docked); element = itemWrapper.element; for (i = 0, ln = sideItems.length; i < ln; i++) { sibling = sideItems[i]; siblingIndex = container.indexOf(sibling); if (siblingIndex > index) { referenceElement = sibling.element; sideItems.splice(i, 0, item); break; } } if (!referenceElement) { sideItems.push(item); referenceElement = this.getBodyElement(); } this.itemsCount++; if (position === 'start') { element.insertBefore(referenceElement); } else { element.insertAfter(referenceElement); } itemWrapper.wrap(item.element); itemWrapper.bindSize(this.getDirection() === 'horizontal' ? 'width' : 'height'); }, removeItem: function(item) { var position = item.getDocked(), items = this.items[this.positionMap[position]]; item.removeCls('x-docked-' + position); Ext.Array.remove(items, item); item.unlink(['$dockItemWrapper']); item.element.detach(); delete item.$dockWrapper; if (--this.itemsCount === 0) { this.destroy(); } }, getItemsSlice: function(index) { var container = this.getContainer(), items = this.items, slice = [], sideItems, i, ln, item; for (sideItems = items.start, i = 0, ln = sideItems.length; i < ln; i++) { item = sideItems[i]; if (container.indexOf(item) > index) { slice.push(item); } } for (sideItems = items.end, i = 0, ln = sideItems.length; i < ln; i++) { item = sideItems[i]; if (container.indexOf(item) > index) { slice.push(item); } } return slice; }, applyElement: function(element) { return Ext.Element.create(element); }, updateElement: function(element) { element.addCls('x-dock-' + this.getDirection()); }, applyBodyElement: function(bodyElement) { return Ext.Element.create(bodyElement); }, updateBodyElement: function(bodyElement) { this.getElement().append(bodyElement); }, updateInnerWrapper: function(innerWrapper, oldInnerWrapper) { var innerElement = this.getBodyElement(); if (oldInnerWrapper && oldInnerWrapper.$outerWrapper === this) { innerElement.remove(oldInnerWrapper.getElement()); delete oldInnerWrapper.$outerWrapper; } if (innerWrapper) { innerWrapper.setSizeState(this.getSizeState()); innerWrapper.$outerWrapper = this; innerElement.append(innerWrapper.getElement()); } }, updateSizeState: function(state) { var innerWrapper = this.getInnerWrapper(); this.getElement().setSizeState(state); if (innerWrapper) { innerWrapper.setSizeState(state); } }, destroy: function() { var me = this, innerWrapper = me.getInnerWrapper(), outerWrapper = me.$outerWrapper; if (innerWrapper) { if (outerWrapper) { outerWrapper.setInnerWrapper(innerWrapper); } else { innerWrapper.getElement().replace(me.getElement()); delete innerWrapper.$outerWrapper; } } delete me.$outerWrapper; me.setInnerWrapper(null); me.unlink(['_bodyElement', '_element']); me.callParent(); }});