PDA

View Full Version : Drag and Drop targets get removed after Grid Refreshes.



pllee
28 Dec 2010, 2:29 PM
I'm trying to set up a DD grid so the rows can be moved around and sorted. After the sort is applied on the store the DDtargets get lost. Is there any reason on why my code is doing this or is this some bug in Ext ?
/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
Ext.onReady(function () {

var myData = {
records: [{
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"
}]
};


// Generic fields array to use in both store defs.
var fields = [{
name: 'name',
mapping: 'name'
},
{
name: 'column1',
mapping: 'column1'
},
{
name: 'column2',
mapping: 'column2'
}];

// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields: fields,
data: myData,
root: 'records'
});



// Column Model shortcut array
var cols = [{
id: 'name',
header: "Record Name",
width: 160,
sortable: true,
dataIndex: 'name'
},
{
header: "column1",
width: 50,
sortable: true,
dataIndex: 'column1'
},
{
header: "column2",
width: 50,
sortable: true,
dataIndex: 'column2'
}];

// declare the source Grid
this.firstGrid = new Ext.grid.GridPanel({
ddGroup: 'firstGridDDGroup',
store: firstGridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
title: 'First Grid'
});



//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'hbox',
renderTo: 'panel',
defaults: {
flex: 1
},
//auto stretch
layoutConfig: {
align: 'stretch'
},
items: [
this.firstGrid],
bbar: ['->', // Fill
{
text: 'Reset both grids',
handler: function () {
//refresh source grid
firstGridStore.loadData(myData);

//purge destination grid
}
}]
});

// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);

/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view scroller element
this.firstGrid.on('afterlayout', function () {
for (var i = 0; i < 10; ++i) {
var firstGridDropTargetEl = this.firstGrid.getView().getRow(i);
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
grid: this.firstGrid,
row: i,
ddGroup: 'firstGridDDGroup',
notifyDrop: function (ddSource, e, data) {
var record = ddSource.dragData.selections[0];
var oldName = record.get('name');

record.set('name', record.store.getAt(this.row).get('name'));
record.store.getAt(this.row).set('name', oldName);
record.store.sort('name', 'ASC');


return true
}
});
}
}, this);



});

Thanks in advance.

mankz
28 Dec 2010, 11:42 PM
The row elements are not to be trusted for anything really, as they're repainted a lot. Instead use a DropZone targeting the grid.view.scroller for example.

pllee
29 Dec 2010, 6:46 AM
The row elements are not to be trusted for anything really, as they're repainted a lot. Instead use a DropZone targeting the grid.view.scroller for example.

Thanks for the response. The scroller really isn't an option, the target is not accurate enough. I guess I'll just have to put this code on the back burner unless there is some grid refresh event that I can use.

mankz
29 Dec 2010, 6:47 AM
How do you mean it's not accurate enough? What does your requirements look like?

pllee
4 Jan 2011, 4:11 PM
How do you mean it's not accurate enough? What does your requirements look like?

Sorry for the late response. I need to be able to have a grid that the rows can be reordered with drag and drop. The targets need to be at the row level. When I call a sort on the store I think the datachanged event is firing the grid to refresh and then all of the drop targets are gone. Is there an event that I can listen to, to trigger the droptargets to get re-applied. Or is it not even worth trying?