title: Halt the processing of DragDrop events on displaying a window while performing drag & drop between grids
body: <p>I have started working on it since past couple of months.
  I have an issue handling drag &amp; drop events.</p>
  
  <p>I have two grids placed side by side and I am performing drag &amp; drop operation from left grid(Grid A) to the right grid(Grid B). I am using both <strong>BeforeDrop</strong> and <strong>Drop</strong> events on <em>Grid B</em>. On drag and drop of data from <em>Grid A</em> to <em>Grid B</em>, I am displaying a custom <em>Window</em> having a <em>combo box</em> in it.</p>
  
  <p>The displaying of the window and selecting values in combo box using <strong>Select</strong> event is done in the <strong>BeforeDrop</strong> event and reloading the <em>Grid B's</em> store is done in the <strong>Drop</strong> event.</p>
  
  <p>The problem is when I drag and drop the data from Grid A to Grid B, the <strong>BeforeDrop</strong> event is triggered where the window pops up and <strong>simultaneously before even selecting the combo box data, the <em>Drop</em> event also gets triggered reloading the Grid B's store in the background</strong>.</p>
  
  <p>I want the <strong>Drop</strong> 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? </p>
  
  <p>Any Help is much appreciated..</p>
  
  <p>Here is some code:</p>
  
  <p><strong>Panel with two grids along with drag drop events</strong></p>
  
  <pre><code>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();
      }
  });
  </code></pre>
  
  <p><strong>My custom Window:</strong></p>
  
  <pre><code>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);
      },
  });
  </code></pre>
  
  <p>As soon as I drag and drop, I get the window but in the console i see that both events have been executed:</p>
  
  <p>The before drop event is triggered!!<br>
  The drop event is triggered!!</p>
  
  <p><strong>NOTE:</strong>
  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.</p>
  
  <p>Alert Msg works:</p>
  
  <pre><code>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
  
  }, 
  </code></pre>