/** * This plugin provides row drag and drop functionality. * * ```javascript * @example({ framework: 'extjs' }) * var store = Ext.create('Ext.data.Store', { * fields: ['name', 'email', 'phone'], * data: [ * { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' }, * { name: 'Bart', email: '[email protected]', phone: '555-222-1234' }, * { name: 'Homer', email: '[email protected]', phone: '555-222-1244' }, * { name: 'Marge', email: '[email protected]', phone: '555-222-1254' } * ], * proxy: { * type: 'memory', * reader: { * type: 'json' * } * } * }); * * Ext.create('Ext.grid.Grid', { * store: store, * columns: [{ * text: 'Name', * dataIndex: 'name' * }, { * text: 'Email', * dataIndex: 'email', * width: 230 * }, { * text: 'Phone', * dataIndex: 'phone', * width: 150 * }], * plugins: { * gridrowdragdrop: { * dragText: 'Drag and drop to reorganize' * } * }, * height: 300, * fullscreen: true * }); * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-grid height="300" fullscreen="true" * Plugins='{"gridrowdragdrop": true}' * selectable='{ "checkbox": true }' * onready="editablegrid.onGridReady" * > * <ext-column header="Name" dataIndex="name"></ext-column> * <ext-column text="Email" dataIndex="email" width="230"></ext-column> * <ext-column text="Phone" dataIndex="phone" width="150"></ext-column> * </ext-grid> * ``` * ```javascript * @example({framework: 'ext-web-components', tab: 2, packages: ['ext-web-components']}) * import '@sencha/ext-web-components/dist/ext-grid.component'; * import '@sencha/ext-web-components/dist/ext-column.component'; * * Ext.require(['Ext.grid.plugin.RowDragDrop']); * * export default class RowDragDropComponent { * constructor() { * this.store = new Ext.data.Store({ * fields: ['name', 'email', 'phone'], * data: [ * { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' }, * { name: 'Bart', email: '[email protected]', phone: '555-222-1234' }, * { name: 'Homer', email: '[email protected]', phone: '555-222-1244' }, * { name: 'Marge', email: '[email protected]', phone: '555-222-1254' } * ], * proxy: { * type: 'memory', * reader: { * type: 'json' * } * } * }); * } * * onGridReady(event) { * this.editableGridCmp = event.detail.cmp; * this.editableGridCmp.setStore(this.store); * } * } * * window.rowdragdrop = new RowDragDropComponent(); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtGrid, ExtColumn } from '@sencha/ext-modern'; * * Ext.require(['Ext.grid.plugin.RowDragDrop']); * * export default class MyExample extends Component { * state = { * store: new Ext.data.Store({ * fields: ['name', 'email', 'phone'], * data: [ * { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' }, * { name: 'Bart', email: '[email protected]', phone: '555-222-1234' }, * { name: 'Homer', email: '[email protected]', phone: '555-222-1244' }, * { name: 'Marge', email: '[email protected]', phone: '555-222-1254' } * ], * proxy: { * type: 'memory', * reader: { * type: 'json' * } * } * }) * } * render() { * return ( * <ExtGrid height="300" fullscreen="true" * plugins="gridrowdragdrop" * selectable='{ "checkbox": true }' * store={this.state.store} * > * <ExtColumn header="Name" dataIndex="name"></ExtColumn> * <ExtColumn text="Email" dataIndex="email" width="230"></ExtColumn> * <ExtColumn text="Phone" dataIndex="phone" width="150"></ExtColumn> * </ExtGrid> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * Ext.require(['Ext.grid.plugin.RowDragDrop']); * * @Component({ * selector: 'app-root-1', * styles: [` * `], * template: ` * <ExtGrid height="300" fullscreen="true" * [plugins]="{ gridrowdragdrop: true }" * [selectable]="selectable" * [store]="store" * > * <ExtColumn header="Name" dataIndex="name"></ExtColumn> * <ExtColumn text="Email" dataIndex="email" width="230"></ExtColumn> * <ExtColumn text="Phone" dataIndex="phone" width="150"></ExtColumn> * </ExtGrid> * ` * }) * export class AppComponent { * selectable = { * checkbox: true, * }; * store = new Ext.data.Store({ * fields: ['name', 'email', 'phone'], * data: [ * { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' }, * { name: 'Bart', email: '[email protected]', phone: '555-222-1234' }, * { name: 'Homer', email: '[email protected]', phone: '555-222-1244' }, * { name: 'Marge', email: '[email protected]', phone: '555-222-1254' } * ], * proxy: { * type: 'memory', * reader: { * type: 'json' * } * } * }); * } * ``` */Ext.define('Ext.grid.plugin.RowDragDrop', { extend: 'Ext.plugin.dd.DragDrop', alias: 'plugin.gridrowdragdrop', requires: [ 'Ext.grid.GridDragZone', 'Ext.grid.GridDropZone', 'Ext.grid.column.Drag' ], handle: '.' + Ext.baseCSSPrefix + 'gridrow', groups: 'gridRowGroup', dropIndicator: Ext.baseCSSPrefix + 'grid-drop-indicator', /** * @cfg {String/function} dragText * The text to show while dragging * Defaults to String * * Two placeholders can be used in the text: * * - `{0}` The number of selected items. * - `{1}` 's' when more than 1 items (only useful for English). */ dragText: '{0} selected row{1}', /** * @cfg {Boolean} dragIcon * Set as `true` to show drag icon on grid row. * * **NOTE:** Defaults to `true` in touch supported devices */ dragIcon: (Ext.supports.Touch && Ext.supports.TouchEvents) ? true : false, /** * @cfg {Boolean} [copy=false] * Set as `true` to copy the records from the source grid to the destination drop * grid. Otherwise, dragged records will be moved. * * **Note:** This only applies to records dragged between two different grids with * unique stores. */ /** * @event beforedrop * **This event is fired on valid drop at {@link Ext.grid.Grid GridView}** * * Returning `false` to this event cancels drop operation and prevent drop event. * * grid.on('beforedrop', function(node, data, overModel, dropPosition) { * // return false; * }); * * @param {HTMLElement} node The {@link Ext.grid.Grid grid view} node **if any** over * which the cursor was positioned. * * @param {Object} data The data object gathered on drag start. * It contains the following properties: * @param {Ext.grid.Grid} data.view The source grid view from which the drag * originated * @param {Ext.grid.cell.Cell} data.item The grid view node upon which the mousedown event * was registered * @param {Ext.data.Model[]} data.records An Array of Models representing the * selected data being dragged from the source grid view * * @param {Ext.data.Model} overModel The Model over which the drop gesture took place * * @param {String} dropPosition `"before"` or `"after"` depending on whether the * cursor is above or below the mid-line of the node. */ /** * @event drop * **This event is fired when a drop operation has been completed * and the data has been moved {@link Ext.grid.Grid GridView}** * * @param {HTMLElement} node The {@link Ext.grid.Grid grid view} node **if any** over * which the cursor was positioned. * * @param {Object} data The data object gathered on drag start. * It contains the following properties: * @param {Ext.grid.Grid} data.view The source grid view from which the drag * originated * @param {Ext.grid.cell.Cell} data.item The grid view node upon which the mousedown event * was registered * @param {Ext.data.Model[]} data.records An Array of Models representing the * selected data being dragged from the source grid view * * @param {Ext.data.Model} overModel The Model over which the drop gesture took place * * @param {String} dropPosition `"before"` or `"after"` depending on whether the * cursor is above or below the mid-line of the node. */ init: function(view) { var me = this; if (view.isLockedGrid) { me.addDragIndicator(view); } view.on('initialize', me.onViewInitialize, me); }, onViewInitialize: function(view) { var me = this, dragZone = {}; if (me.enableDrag) { if (me.proxy) { dragZone.proxy = me.proxy; } if (me.activateOnLongPress) { dragZone.activateOnLongPress = me.activateOnLongPress; } me.dragZone = new Ext.grid.GridDragZone(Ext.apply({ element: view.bodyElement, view: view, dragText: me.dragText, handle: me.handle, groups: me.groups, scrollAmount: me.scrollAmount, containerScroll: me.containerScroll, constrain: Ext.getBody() }, dragZone)); } if (me.enableDrop) { me.dropZone = new Ext.grid.GridDropZone({ view: view, element: view.bodyElement, groups: me.groups, dropIndicator: me.dropIndicator, overCls: me.overCls, copy: me.copy }); } if (!view.isLockedGrid) { me.addDragIndicator(view); } }, /** * Add drag indicator on touch supported devices * or if `dragIcon` is true */ addDragIndicator: function(view) { if (!this.dragIcon) { return; } if (view.isLockedGrid) { view.on({ columnremove: 'onColumnRemove', createregion: 'onCreateRegion', scope: this }); } else if (view.insertColumn) { view.insertColumn(0, { xtype: 'dragcolumn' }); } }, /** * Add `dragIcon` column to the region grid if it doesn't exist * @param {Ext.grid.Grid} grid * @param {Ext.grid.column.Column} columns */ onCreateRegion: function(grid, columns) { columns = Ext.Array.from(columns); if (columns.length && !grid.hasDragColumn) { columns = Ext.Array.insert(columns, 0, [{ xtype: 'dragcolumn' }]); grid.hasDragColumn = true; } return columns; }, /** * Manage `dragIcon` column * @param {Ext.grid.Grid} regionGrid * @param {Ext.grid.column.Column} column */ onColumnRemove: function(regionGrid, column) { if (this.cmp.hasDragColumn && !column.isDragColumn) { Ext.asap(this.handleColumnMove, this); } }, /** * Reposition `dragIcon` column on region grid column changes its * region position */ handleColumnMove: function() { var view = this.cmp, dragCol = view.query('dragcolumn')[0], leftRegion, leftGrid, centerRegion, columns; if (!dragCol) { return; } leftRegion = view.getRegion('left'); leftGrid = leftRegion.getGrid(); columns = leftGrid.getColumns(); // If left region grid has only `dragIcon` column move it to center // region grid if (columns.indexOf(dragCol) !== -1 && columns.length === 1) { centerRegion = view.getRegion('center'); centerRegion.getGrid().insertColumn(0, dragCol); } else if (columns.length && columns.indexOf(dragCol) === -1) { // Insert dragIcon column to left region grid leftGrid.insertColumn(0, dragCol); } }});