PDA

View Full Version : Ability to drag and drop row within the same grid and across grids



webfriend13
11 Jun 2012, 2:23 AM
Hi all,

Following code allows you to drag and drop data items across two grids. I want to provide feature where user should be allowed to drg and drop records across grids and within same grid.

http://docs.sencha.com/ext-js/4-1/#!/example/dd/dnd_grid_to_grid.html




Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);
Ext.define('DataObject', {
extend: 'Ext.data.Model',
fields: ['name', 'column1', 'column2']
});
Ext.onReady(function(){
var myData = [
{ name : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 9", column1 : "9", column2 : "9" }
];
// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject',
data: myData
});

// Column Model shortcut array
var columns = [
{text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'},
{text: "column1", width: 70, sortable: true, dataIndex: 'column1'},
{text: "column2", width: 70, sortable: true, dataIndex: 'column2'}
];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup',
dropGroup: 'secondGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},
store : firstGridStore,
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
var secondGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject'
});
// create the destination Grid
var secondGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'firstGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},
store : secondGridStore,
columns : columns,
stripeRows : true,
title : 'Second Grid',
margins : '0 0 0 3'
});
//Simple 'border layout' panel to house both grids
var displayPanel = Ext.create('Ext.Panel', {
width : 650,
height : 300,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo : 'panel',
defaults : { flex : 1 }, //auto stretch
items : [
firstGrid,
secondGrid
],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both grids',
handler: function(){
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}]
}
});
});

webfriend13
11 Jun 2012, 10:07 PM
Just change the dropGroup config value to same as dragGroup as shown in the below code :




Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);
Ext.define('DataObject', {
extend: 'Ext.data.Model',
fields: ['name', 'column1', 'column2']
});
Ext.onReady(function(){
var myData = [
{ name : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 9", column1 : "9", column2 : "9" }
];
// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject',
data: myData
});

// Column Model shortcut array
var columns = [
{text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'},
{text: "column1", width: 70, sortable: true, dataIndex: 'column1'},
{text: "column2", width: 70, sortable: true, dataIndex: 'column2'}
];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup',
dropGroup: 'firstGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},
store : firstGridStore,
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
var secondGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject'
});
// create the destination Grid
var secondGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'secondGridDDGroup'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},
store : secondGridStore,
columns : columns,
stripeRows : true,
title : 'Second Grid',
margins : '0 0 0 3'
});
//Simple 'border layout' panel to house both grids
var displayPanel = Ext.create('Ext.Panel', {
width : 650,
height : 300,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo : 'panel',
defaults : { flex : 1 }, //auto stretch
items : [
firstGrid,
secondGrid
],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both grids',
handler: function(){
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}]
}
});
});

shanu
14 Jan 2015, 3:31 AM
Just add another plugin to the grid and set the dropGroup as the same as the dragGroup.


Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
]);


Ext.define('DataObject', {
extend: 'Ext.data.Model',
fields: ['name', 'column1', 'column2']
});


Ext.onReady(function(){


var myData = [
{ name : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 9", column1 : "9", column2 : "9" }
];


// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject',
data: myData
});




// Column Model shortcut array
var columns = [
{text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'},
{text: "column1", width: 70, sortable: true, dataIndex: 'column1'},
{text: "column2", width: 70, sortable: true, dataIndex: 'column2'}
];


// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect: true,
viewConfig: {
plugins: [{
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup',
dropGroup: 'secondGridDDGroup'
},{
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup',
dropGroup: 'firstGridDDGroup'
}],
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},
store : firstGridStore,
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});


var secondGridStore = Ext.create('Ext.data.Store', {
model: 'DataObject'
});


// create the destination Grid
var secondGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins:[ {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'firstGridDDGroup'
}, {
ptype: 'gridviewdragdrop',
dragGroup: 'secondGridDDGroup',
dropGroup: 'secondGridDDGroup'
}],
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},
store : secondGridStore,
columns : columns,
stripeRows : true,
title : 'Second Grid',
margins : '0 0 0 3'
});


//Simple 'border layout' panel to house both grids
var displayPanel = Ext.create('Ext.Panel', {
width : 650,
height : 300,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo : 'panel',
defaults : { flex : 1 }, //auto stretch
items : [
firstGrid,
secondGrid
],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both grids',
handler: function(){
//refresh source grid
firstGridStore.loadData(myData);


//purge destination grid
secondGridStore.removeAll();
}
}]
}
});
});

SwaJime
26 Jan 2018, 8:07 AM
This is not working in Ext 5.1.1. I am getting this error:

Ext.ComponentManager.register(): Registering duplicate component id "firstGrid-body-drag-status-proxy"

mounir1
4 Jan 2019, 5:00 AM
any updates for 6.6 version .