PDA

View Full Version : Halt execution on displaying a custom window (Ext.window.Window) in ExtJS 4.1



Harshrossi
17 May 2013, 1:40 AM
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. I want the execution to halt once the window pops and then continue execution after I select an item from combo box.

Is there a way to halt the triggering process once the window is displayed just as in case of a javascript alert?

Any Help is much appreciated..

A sample code is shown below:


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 and when the window pops up, both events get triggered simultaneously and message is displayed in console..

The before drop event is triggered!!
The drop event is triggered!!

tobiu
17 May 2013, 3:01 AM
You can use the beforeshow event of the window and return false in case you do not want to show it (depending on your logic).

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.AbstractComponent-event-beforeshow

Harshrossi
17 May 2013, 4:00 AM
Hi Tobiu,

Thank you for the response.

Can you please provide a sample code?

tobiu
17 May 2013, 8:47 AM
this is a bit simplified, but you should get the idea:



Ext.define('MyApp.Window', {
extend : 'Ext.window.Window',
listeners : {
beforeshow : function() {
if (foo === 'bar') {
return false;
}
}
}
});

Harshrossi
19 May 2013, 10:51 PM
Hi Tobiu,

Thanks for giving me an idea to solve this issue but I wanted to reload the store just after the window closes. So I used the BeforeDestroy event instead of BeforeShow and it worked. Strange!!

Thanks again :)

Harshrossi
15 Oct 2013, 2:53 AM
I found a solution to this here:
http://stackoverflow.com/questions/16589920/halt-the-processing-of-dragdrop-events-on-displaying-a-window-while-performing-d