PDA

View Full Version : Copy records in Drag and Drop Grid ext-js 4.2.1



rakesh.mmp
21 Jan 2015, 1:48 AM
Hi,
I have been searching for solutions for this. I have two grid panels which have drag and drop plugin enabled.
I want the copy of the record which is dragged to destination grid to be inserted in , but when once record is dropped to other grid the record is lost in source grid.


I tried to find some solutions found this at many places.



Ext.create('Ext.grid.Panel', {
store: 'testStore',
columns: [
{header: 'Name', dataIndex: 'name', flex: true}
],
viewConfig: {
copy: true,
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize'
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()


I am using ext-js 4.2.1 and in document there is no copy config present
There is no config option as copy present.
Can anyone suggest how to achieve this functionality in ext-js 4.2.1.


Thanks & Regards
Rakesh

Jad
21 Jan 2015, 2:45 AM
Hy try like this


Ext.application({ name : 'Fiddle',


launch : function() {
var group1 = 'group1',
group2 = 'group2';

Ext.create('Ext.panel.Panel', {
layout: { type: 'hbox', align: 'stretch' },
renderTo: Ext.getBody(),
items: [
{
itemId: 'grid1',
flex: 1,
xtype: 'grid',
multiSelect: true,
viewConfig: {
copy: true,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: group1,
dropGroup: group2
}
},
store: Ext.create('Ext.data.Store', {
fields: [
{ name: 'name' },
{ name: 'column1' },
{ name: 'column2' }
],
data: [
{ name: 'name 1', column1: 'column1 1' , column2: 'column2 1' },
{ name: 'name 2', column1: 'column1 2' , column2: 'column2 2' }
]
}),
columns: [
{
text: 'Record Name',
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: 'column1',
width: 80,
sortable: true,
dataIndex: 'column1'
}, {
text: 'column2',
width: 80,
sortable: true,
dataIndex: 'column2'
}
],
stripeRows: true,
title: 'First Grid',
margins: '0 5 0 0'
}, {
itemId: 'grid2',
flex: 1,
xtype: 'grid',
viewConfig: {
allowCopy: true,
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: group2,
dropGroup: group1
}
},
store: Ext.create('Ext.data.Store', {
fields: [
{ name: 'name' },
{ name: 'column1' },
{ name: 'column2' }
]
}),
columns: [
{
text: 'Record Name',
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: 'column1',
width: 80,
sortable: true,
dataIndex: 'column1'
}, {
text: 'column2',
width: 80,
sortable: true,
dataIndex: 'column2'
}
],
stripeRows: true,
title: 'Second Grid'
}
]
});


}
});

rakesh.mmp
21 Jan 2015, 4:23 AM
Hi jad,
Thank's for the reply.There is no copy and allowCopy config option present in ext-js 4.2.1 for gridView.
Hence i wanted to know is there any alternative solution for this.

Thanks & regards
Rakesh

Jad
21 Jan 2015, 4:31 AM
these two parameter exists

rakesh.mmp
21 Jan 2015, 5:10 AM
I am posting this link of sencha docs for Ext-js 4.2.1
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View

Here there is no config called copy or allowCopy. Hence i am unable to use it.

Jad
21 Jan 2015, 5:43 AM
try the code in https://fiddle.sencha.com/#home and you'll see il work fine