Performance when drag and drop between 2 large grids

[oalyman]

Hi,

i want to implement drag and drop between 2 grids. each grid can have a size about 500 rows.
if i select 10+ rows to drop them on the other grid it takes very long to transfer the rows.

this is my current code to test. perhaps some1 can help me with the performance issue or tell me my faults:


var Example = {
init : function() {
//grid1 --------------------------------------------------------
var grid1Data = new Array();

for(var i=0; i<500; i++) {
grid1Data[i] = ['Name ' + i];
}
var grid1ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(grid1Data),
reader: new Ext.data.ArrayReader({}, [
{name: 'name'},
])
});
grid1ds.load();

var grid1ColModel = new Ext.grid.ColumnModel([
{id:'name',header: "Name", width: 100, sortable: true, locked:false, dataIndex: 'name'}
]);

// create the Grid
var grid1 = new Ext.grid.Grid('grid1', {
ds: grid1ds,
cm: grid1ColModel,
autoExpandColumn: 'name',
enableDragDrop: true
});

//drag-n-drop (drop) support for grid1
var grid1Drop = new Ext.dd.DropTarget(grid1.container, {
ddGroup : 'GridDD',
notifyDrop : function(dd, e, data){
if (Ext.get(dd.getEl()).findParent("#" + grid2.container.id)) {
for(var i=0; i < data.selections.length; i++) {
var record = data.selections[i];
grid1.getDataSource().add(record);
grid2.getDataSource().remove(record);
}
} else {
alert("Source element wasn't valid for this drop location. (Is drag within same grid?)");
}
}
});
grid1.render();

//grid2 --------------------------------------------------------
var grid2Data = new Array();
var grid2ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(grid2Data),
reader: new Ext.data.ArrayReader({}, [
{name: 'name'},
])
});
grid2ds.load();

var grid2ColModel = new Ext.grid.ColumnModel([
{id:'name',header: "Name", width: 100, sortable: true, locked:false, dataIndex: 'name'}
]);

// create the Grid
var grid2 = new Ext.grid.Grid('grid2', {
ds: grid2ds,
cm: grid2ColModel,
autoExpandColumn: 'name',
enableDragDrop: true
});

//drag-n-drop (drop) support for grid1
var grid2Drop = new Ext.dd.DropTarget(grid2.container, {
ddGroup : 'GridDD',
notifyDrop : function(dd, e, data){
if (Ext.get(dd.getEl()).findParent("#" + grid1.container.id)) {
for(var i=0; i < data.selections.length; i++) {
var record = data.selections[i];
grid2.getDataSource().add(record);
grid1.getDataSource().remove(record);
}
} else {
alert("Source element wasn't valid for this drop location. (Is drag within same grid?)");
}
}
});

// set any options
grid2.render();
}
};
Ext.onReady(Example.init, Example);


cheers