View Full Version : Enable drag n drop inside one grid

24 Aug 2011, 11:01 PM
I'v wrote a file manager in extjs. I have a file grid with folders in a tree. I set up DD between grid and tree but i would like to enable DD also inside a grid (drag rows that are files into a rows that are folders). is it possible?

27 Aug 2011, 7:27 AM
Should be much the same as when you have multiple grids. Why, are you running into problems?

1 Sep 2011, 12:00 AM
Well mate, if i setup a grid with this code

plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'organizerDD',
dropGroup: 'organizerDD'

all i can do is to change position of a rows in a grid, i can't actualy move a rown into another one.

1 Sep 2011, 5:13 AM
I see. It sounds like you just need to change your grid into a tree. Is there anything preventing you from using a tree?

4 Sep 2011, 9:54 PM
I already use a tree as a second component in this module. Tree list is a folder list and i can drag and drop items from a grid into a tree. But i also want to enable DD inside a grid (like Windows explorer, u can drag folders to the tree and into the other folders in a folder view).

5 Sep 2011, 2:51 AM
I think I understand.

So within the grid you'd have folders and files. Files and folders can be dragged and dropped onto other folders to move them to those folders. Though there is an implicit tree structure of folders behind the scenes, the grid's role is to show the contents of the current folder.

Would the drop cause a move or a copy?

Is my description correct?

5 Sep 2011, 5:19 AM

DD inside a grid move files into those folders. Basicly when I drag the folder i want to DD plugin accept it, then i will manually start function that will move folder and refresh grid.

5 Sep 2011, 10:35 PM
Give this a try:

Ext.define('CustomGridDragDrop', {
extend: 'Ext.grid.plugin.DragDrop',

alias: 'plugin.customgridviewdragdrop',

onViewRender: function() {

var dz = this.dropZone;

if (dz) {
dz.onNodeOver = function(node, dragZone, e, data) {
var me = this;
me.overRecord = me.view.getRecord(node);
me.valid = !Ext.Array.contains(data.records, me.overRecord);

return me.valid ? me.dropAllowed : me.dropNotAllowed;

dz.onContainerOver = function() {
this.valid = false;
return false;

dz.handleNodeDrop = function(data, record, position) {
var droppedRecords = data.records;

console.log(droppedRecords.length + ' records dropped');
console.log('First record: ' + droppedRecords[0].get('name'));
console.log('Drop target: ' + record.get('name'));