PDA

View Full Version : Dragdrop plugin question



spaque99
17 Sep 2013, 10:32 AM
Hi all,

I have been playing with this example from sencha try:

http://try.sencha.com/extjs/4.0.7/examples/dd/dnd_grid_to_grid/viewer.html

(http://try.sencha.com/extjs/4.0.7/examples/dd/dnd_grid_to_grid/viewer.html)One thing I have been trying to do is exactly the same but without the records being removed from the left grid. My left grid needs to remain a reference and I would like it to stay intact. Is that possible?

Thanks
Seb

slemmon
2 Oct 2013, 9:41 AM
You can set copy: true on the viewConfig of the grid you want the records to copied from instead of moved from:

https://fiddle.sencha.com/#fiddle/p1



Ext.application({
name: 'Fiddle',


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




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'
},
copy: true, // TRUE TO COPY THE RECORD INSTEAD OF MOVE IT
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: document.body,
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();
}
}]
}
});
}
});