/** * @class Ext.grid.plugin.ColumnResizing * @extends Ext.Component * Description */Ext.define('Ext.grid.plugin.ColumnResizing', { extend: 'Ext.Component', alias: 'plugin.gridcolumnresizing', config: { grid: null, /** * @cfg {Boolean} realtime * When true the whole column will resize in real-time as the user drags. When false only the header will resize * until the interaction is done. */ realtime: false }, resizerCls: Ext.baseCSSPrefix + 'grid-with-column-resize', init: function (grid) { this.setGrid(grid); this._resizeMarker = grid.resizeMarker; this._resizeMarkerParent = this._resizeMarker.parent(); }, updateGrid: function (grid, oldGrid) { var cls = this.resizerCls; if (oldGrid) { oldGrid.getHeaderContainer().renderElement.un({ touchstart: 'onContainerTouchStart', touchmove: 'onContainerTouchMove', touchend: 'onContainerTouchEnd', scope: this, priority: 100 }); oldGrid.removeCls(cls); } if (grid) { grid.getHeaderContainer().renderElement.on({ touchstart: 'onContainerTouchStart', touchmove: 'onContainerTouchMove', touchend: 'onContainerTouchEnd', scope: this }); grid.addCls(cls); } }, onContainerTouchStart: function (e) { var target = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-column'), resizer = e.getTarget('.' + Ext.baseCSSPrefix + 'grid-column-resizer'), grid = this.getGrid(), column; if (resizer && !e.multitouch && target && !this._resizeColumn) { column = Ext.Component.fromElement(target); if (column && column.getResizable()) { this._startColumnWidth = column.getComputedWidth(); this._minColumnWidth = column.getMinWidth(); this._resizeColumn = column; this._startX = e.getX(); column.renderElement.addCls(Ext.baseCSSPrefix + 'grid-column-resizing'); // Prevent drag and longpress gestures being triggered by this mousedown e.cancelGesture(); if (!this.getRealtime()) { this._resizeMarker.show(); this._resizeMarker.setLeft(column.el.getOffsetsTo(this._resizeMarkerParent)[0] + this._startColumnWidth); } else { column.setWidth(this._startColumnWidth); } } } else if (e.multitouch && this._resizeColumn) { this.endResize(); } }, onContainerTouchMove: function (e) { // Single touch only if (e.isMultitouch) { this.endResize(); return; } if (this._resizeColumn) { var column = this._resizeColumn, resizeAmount = e.getX() - this._startX; if (column) { this.currentColumnWidth = Math.max(Math.ceil(this._startColumnWidth + resizeAmount), this._minColumnWidth); if (this.getRealtime()) { column.setWidth(this.currentColumnWidth); column.renderElement.setWidth(this.currentColumnWidth); } else { this._resizeMarker.setLeft(column.el.getOffsetsTo(this._resizeMarkerParent)[0] + this.currentColumnWidth); } e.stopEvent(); } } }, onContainerTouchEnd: function (e) { if (this._resizeColumn) { e.stopEvent(); this.endResize(); } }, endResize: function () { var column = this._resizeColumn, grid = this.getGrid(); if (column) { if (!this.getRealtime()) { grid.resizeMarker.hide(); } column.setWidth(this.currentColumnWidth); column.renderElement.removeCls(Ext.baseCSSPrefix + 'grid-column-resizing'); delete this._resizeColumn; } }});