/** * @private */Ext.define('Ext.pivot.plugin.configurator.DropZone', { extend: 'Ext.drag.Target', groups: 'pivotfields', leftIndicatorCls: Ext.baseCSSPrefix + 'pivot-grid-left-indicator', rightIndicatorCls: Ext.baseCSSPrefix + 'pivot-grid-right-indicator', listItemSelector: '.' + Ext.baseCSSPrefix + 'listitem', listSelector: '.' + Ext.baseCSSPrefix + 'list', constructor: function(list){ this.list = list; this.callParent([{ element: list.getScrollable().getElement() }]); }, getLeftIndicator: function() { if (!this.leftIndicator) { this.self.prototype.leftIndicator = Ext.getBody().createChild({ cls: this.leftIndicatorCls, html: " " }); this.self.prototype.indicatorWidth = this.leftIndicator.dom.offsetWidth; this.self.prototype.indicatorOffset = Math.round(this.indicatorWidth / 2); } return this.leftIndicator; }, getRightIndicator: function() { if (!this.rightIndicator) { this.self.prototype.rightIndicator = Ext.getBody().createChild({ cls: this.rightIndicatorCls, html: " " }); } return this.rightIndicator; }, accepts: function(info){ var data = info.data, record = data.record, list = this.list, panel = list.up('pivotconfigpanel'); if(!record){ return true; } return record.get('field').getSettings().isAllowed(list) && panel.isAllowed(data.sourceList, list, data.record); }, onDragMove: function(info){ if(info.valid) { this.positionIndicator(info); }else{ this.hideIndicators(); } }, onDragLeave: function(info){ this.hideIndicators(); }, onDrop: function(info){ var data = info.data, list = this.list, panel = list.up('pivotconfigpanel'); this.hideIndicators(); if(!panel){ return; } panel.dragDropField(data.sourceList, list, data.record, data.position); }, positionIndicator: function(info){ var me = this, pos = -1, leftIndicator = me.getLeftIndicator(), rightIndicator = me.getRightIndicator(), indWidth = me.indicatorWidth, indOffset = me.indicatorOffset, el, item, leftXY, rightXY, minX, maxX, minY, maxY, leftAnchor, rightAnchor; el = info.getCursorElement(me.listItemSelector); if(el){ item = el.component; leftAnchor = 'tl'; rightAnchor = 'tr'; pos = item.$dataIndex; }else{ leftAnchor = 'bl'; rightAnchor = 'br'; pos = me.list.getViewItems().length; item = me.list.getItemAt(pos - 1); if(item){ el = item.element; }else{ el = info.getCursorElement(me.listSelector); } } leftXY = leftIndicator.getAlignToXY(el, leftAnchor); rightXY = rightIndicator.getAlignToXY(el, rightAnchor); leftXY[0] -= 1; rightXY[0] -= indWidth; if(leftAnchor === 'tl') { leftXY[1] -= indWidth; rightXY[1] -= indWidth; } minX = minY = - indOffset; minX += el.getX(); maxX = minX + el.getWidth(); minY += el.getY(); maxY = minY + el.getHeight(); leftXY[0] = Ext.Number.constrain(leftXY[0], minX, maxX); rightXY[0] = Ext.Number.constrain(rightXY[0], minX, maxX); leftXY[1] = Ext.Number.constrain(leftXY[1], minY, maxY); rightXY[1] = Ext.Number.constrain(rightXY[1], minY, maxY); leftIndicator.show(); rightIndicator.show(); leftIndicator.setXY(leftXY); rightIndicator.setXY(rightXY); info.setData('position', pos); }, hideIndicators: function(){ this.getLeftIndicator().hide(); this.getRightIndicator().hide(); } });