PDA

View Full Version : DragTracker for GridPanel with drag and drop



jack83
22 Mar 2013, 2:02 AM
I have an Ext.Window which contains two tables as GridPanel objects. It is possible to move entries between these tables using drag and drop. Data for both tables are periodically refreshed, every ten seconds using Ext.TaskMgr. I would like to stop the auto reload of the data when the user starts the drag and enable the auto reload when the drop event is finished.

Currently when during drag&drop the auto reload is started, the drag and drop do not work afterwards.

I have read about DragTracker and would like to use it to start and stop auto reload when just after drag and after drop respectively. But I don't really have a clue to which component should it be attached.

Here is my code in a very simplified form, tracker is just declared, its methods are still empty. The records of mainStore are added to the GridPanel - it's not shown here.



var gridPanel = new Ext.grid.GridPanel({
id: 'gridPanel_' + orgLocationId,
title: orgLocationDesc,
cls: 'smis-small-buttons',
store: tmpStore,
columns: [{
...
}],
viewConfig: {
forceFit: true,
scrollOffset: 0
},
stripeRows: true,
autoHeight: true,
frame: false,
border: true,
enableDragDrop: true,
ddGroup: 'gridDD',
listeners: {
afterrender: function() {
var dropTarget = new Ext.dd.DropTarget(gridPanel.getView().scroller.dom, {
grid: gridPanel,
ddGroup: 'gridDD',
notifyDrop: function(ddSource, e, data){
var recs = ddSource.dragData.selections;
var targetRow = this.grid.getView().findRowIndex(e.target);
moveRecordsDD(ddSource, this.grid.store, recs, targetRow);
}
});
}
}

var mainStore = new Ext.data.JsonStore({
storeId: 'mainStore',
url: '<c:url value="/sub/maker.html"/>',
root: 'data',
fields: [
...
],
autoLoad: false
});
superWin = null;
mainStore.load();
mainStore.on('load', function(){
buildMainPanel(mainStore);
});
reloadTask = {
run: function() {
if(commentMsgBox == false) {
mainStore.reload();
}
},
interval: 10000
}

var tracker = new Ext.dd.DragTracker({
onBeforeStart: function() {
console.log('onBeforeStart');
},
onStart: function() {
console.log('onStart');
},
onDrag: function() {
console.log('onDrag');
},
onEnd: function() {
console.log('onEnd');
}
});

tracker.initEl(gridPanel.el);



I simply can't attach the GridPanel object to the tracker cause the el of the gridPanel is always undefined. Any ideas how to attach the tracker to the gridPanel? I'd like to see at least the console.logs from tracker methods when I make drag and drop.

Any example how to define DragTracker with GridPanel would also be very helpful I think. Maybe there exists another solution which is not based on DragTracker. :-/

I would be grateful for your ideas, hints and comments.