I have started working on it since past couple of months. I have an issue handling drag & drop events.
I have two grids placed side by side and I am performing drag & drop operation from left grid(Grid A) to the right grid(Grid B). I am using both BeforeDrop and Drop events on Grid B. On drag and drop of data from Grid A to Grid B, I am displaying a custom Window having a combo box in it.
The displaying of the window and selecting values in combo box using Select event is done in the BeforeDrop event and reloading the Grid B's store is done in the Drop event.
The problem is when I drag and drop the data from Grid A to Grid B, the BeforeDrop event is triggered where the window pops up and simultaneously before even selecting the combo box data, the Drop event also gets triggered reloading the Grid B's store in the background.
I want the Drop event to be triggered after I select an item in the combo box. Is there a way to halt the triggering process once the window is displayed?
Any Help is much appreciated..
Here is some code:
Panel with two grids along with drag drop events
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.panel.Panel',
frame: false,
height: 708,
width: 1150,
layout: {
type: 'border'
},
title: 'MyApp',
initComponent: function () {
var me = this;
var GridADragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
ptype: 'gridviewdragdrop',
dragGroup: 'GridADDGroup',
dropGroup: ''
});
var GridBDragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
ptype: 'gridviewdragdrop',
dragGroup: 'GridADDGroup',
dropGroup: 'GridADDGroup'
});
Ext.applyIf(me, {
items: [{
xtype: 'grid',
id: 'gridb',
title: 'Grid B',
store: 'GridBStore',
viewConfig: {
id: 'Bview',
plugins: [GridBDragDrop],
/*Both Events have been used for Grid B*/
listeners: {
beforedrop: {
fn: me.onBeforeDrop,
scope: me
},
drop: {
fn: me.onDrop,
scope: me
}
}
},
columns: [{
xtype: 'numbercolumn',
dataIndex: 'id',
text: 'ID'
}, {
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
}]
}, {
xtype: 'grid',
id: 'grida',
title: 'Grid A',
store: 'GridAStore',
viewConfig: {
id: 'Aview',
plugins: [GridADragDrop]
},
columns: [{
xtype: 'numbercolumn',
dataIndex: 'id',
text: 'ID'
}, {
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
}]
}]
});
me.callParent(arguments);
},
onBeforeDrop: function (node, data, overModel, dropPosition, dropFunction, options) {
console.log("The before drop event is triggered!!");
// Creating the window
var window = Ext.create('MyApp.Window');
// Getting the combo box object from the window object
var combobox = window.items.items[0];
// Adding 'select' listener to the combo box
combobox.on('select', function (combo, records, options) {
// I do some stuff here
//...
// Once finished I destroy window
window.destroy();
});
// Display the window on item drop
window.show();
},
onDrop: function (node, data, overModel, dropPosition, options) {
console.log("The drop event is triggered!!");
var GridB = Ext.getCmp('gridb'); // Grid B
var GridBStore = GridB.getStore(); // Grid B store
//Reload the GridB store once the item has been dropped
GridBStore.reload();
}
});
My custom Window:
Ext.define('MyApp.Window', {
extend: 'Ext.window.Window',
height: 82,
hidden: false,
id: 'droptaskwindow',
width: 171,
layout: {
type: 'absolute'
},
title: 'Create Task',
modal: true,
expandOnShow: false,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'combobox',
x: 10,
y: 10,
id: 'combodroptask',
width: 130,
fieldLabel: 'ID',
labelPad: 1,
labelWidth: 45,
allowBlank: false,
editable: false,
displayField: 'Name',
}]
});
me.callParent(arguments);
},
});
As soon as I drag and drop, I get the window but in the console i see that both events have been executed:
The before drop event is triggered!!
The drop event is triggered!!
NOTE: One thing I noticed that on displaying simple alert message, only the BEFORE event is triggered but not the DROP event unless I click on OK. This is just the way I want it to work when my window is displayed.
Alert Msg works:
onBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {
console.log("The before drop event is triggered!!");
alert("Dropping..");// IT WORKS!! It Does not allow DROP event to execute..unless OK is clicked
Ext.Msg.alert('Status', 'Dropping..'); //This doesn't work..same as my window
},
