You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    41
    Vote Rating
    0
    chris-mac is on a distinguished road

      0  

    Default [OPEN] EXTJSIII-30 notifyDrop called in wrong ddGroup and/or multiple times

    [OPEN] EXTJSIII-30 notifyDrop called in wrong ddGroup and/or multiple times


    Drop zones which are members of different ddGroup(s) are notified, when drag source is dropped on a drop target overlaying another drop target.

    Also notifyDrop event is called multiple times.

    How to reproduce:
    Code:
    // reference local blank image
    Ext.BLANK_IMAGE_URL = '/extjs/lib/resources/images/default/s.gif';
     
    // create namespace
    Ext.namespace('Test');
     
    // create application
    Test.app = function() {
      // do NOT access DOM from here; elements don't exist yet
     
      // private variables
    
      var tree = new Ext.tree.TreePanel({
        title: 'Tree',
        animate:true,
        height: 300,
        rootVisible: false,
        enableDrag: true,
        ddGroup: 'dropGroup1',
        selModel: new Ext.tree.MultiSelectionModel(),
        loader: new Ext.tree.TreeLoader({
          url: '/tree/nodes'
        })
      });
    
      // set the root node
      var treeRoot = new Ext.tree.AsyncTreeNode({
        draggable: false,
        id: 'items'
      });
    
      tree.setRootNode(treeRoot);
      
      var dropTarget1 = {
        height: 300,
        bodyStyle: 'padding: 30px; font-size: 16px; color: #00AE00;',
        html: 'Drop target 1',
        listeners: {
          render: function(panel){
            
            var dropTarget = new Ext.dd.DropTarget(panel.body,{
              ddGroup: 'dropGroup1',
              copy: false,
              overClass: 'over',
              notifyDrop: function(dragSource, event, data){
                console.info('notifyDrop dropTarget1');
                panel.body.highlight("00AE00");
              }
            });
          }
        }
      }
      
      var dropTarget2 = {
        border: false,
        bodyStyle: 'padding: 20px; font-size: 16px; color: #ff0000;',
        html: 'Drop target 2',
        listeners: {
          render: function(panel){
            
            var dropTarget = new Ext.dd.DropTarget(panel.body,{
              ddGroup: 'dropGroup2',
              copy: false,
              overClass: 'over',
              notifyDrop: function(dragSource, event, data){
                console.info('notifyDrop dropTarget2');
                panel.body.highlight("#ff0000");
              }
            });
          }
        }
      };
      
      var dropTarget3 = {
        border: false,
        bodyStyle: 'padding: 20px; font-size: 16px; color: #A020F0;',
        html: 'Drop target 3',
        listeners: {
          render: function(panel){
            
            var dropTarget = new Ext.dd.DropTarget(panel.body,{
              ddGroup: 'dropGroup3',
              copy: false,
              overClass: 'over',
              notifyDrop: function(dragSource, event, data){
                console.info('notifyDrop dropTarget3');
                panel.body.highlight("#A020F0");
              }
            });
          }
        }
      };
      
      // private functions
    
      // public space
      return {
        // public properties, e.g. strings to translate
        
        // public methods
        init: function() {
        
          var wrapper = new Ext.Panel({
            renderTo: 'ext-panel',
            border: false,
            width: 500,
            height: 300,
            layout: 'column',
            defaults: { border: false },
            items: [
              {
                columnWidth: .7,
                items: dropTarget1
              },{
                columnWidth: .3,
                items: tree
              }
            ]
          });
          
          var win1 = new Ext.Window({
            x: 80,
            y: 130,
            width: 150,
            height: 150,
            closable: false,
            resizable: false,
            title: 'Window 1',
            layout: 'fit',
            items: dropTarget2
          }).show();
          
          var win2 = new Ext.Window({
            x: 130,
            y: 200,
            width: 150,
            height: 150,
            closable: false,
            resizable: false,
            title: 'Window 2',
            layout: 'fit',
            items: dropTarget3
          }).show();
          
          tree.dragZone.addToGroup('dropGroup2');
          tree.dragZone.addToGroup('dropGroup3');
        
        } // end of init
      };
    }(); // end of app
     
    Ext.onReady(Test.app.init, Test.app);
    Please see forum post http://www.extjs.com/forum/showthread.php?t=79806 for more details.

    and working example http://extjs.wima.co.uk/example/18b

    Regards,
    Chris

  2. #2
    Ext JS Premium Member
    Join Date
    Oct 2009
    Posts
    88
    Vote Rating
    12
    hhangus will become famous soon enough

      0  

    Default


    I can confirm this is still a problem in Ext v3.0.3 and it's quite a nuissance. I worked around it by ignoring odd numbered calls in notifyDrop. It would really be nice if it could be fixed in Ext though!!

  3. #3
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    11
    Vote Rating
    0
    fineo_sencha is on a distinguished road

      0  

    Default


    I solved the problem of mutliple firing by a global time variable and only allow one drop event 100 ms after the last one. Works fine for me.

  4. #4
    Sencha User
    Join Date
    Apr 2009
    Posts
    3
    Vote Rating
    0
    adriankb is on a distinguished road

      0  

    Default


    This is still a problem in Ext 4.0.2a.

    At first I thought maybe the notifyDrop methods needed to return true or false correctly, but even with these present it occurs.

    Quick fix:

    Declare dropTargetLastTime outside of the notifyDrop method.

    Code:
    var currentTime = new Date().getTime();                    if (currentTime < dropTargetLastTime + 200)
                        {
                            return false;
                        }
                        else
                        {
                            dropTargetLastTime = currentTime;
                        }

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    sean.parmelee is on a distinguished road

      0  

    Default Possible Workaround

    Possible Workaround


    I ran into this issue in 4.0.7 and 4.1.0 RC2. I have a treepanel with a DropTarget and I'm opening an Ext.Window (which also has a DropTarget of the same group) on top of that treepanel. When I would drag items into the window, the treepanel would also interact with them. The solution I used was to grab a reference to the treepanel's DragDrop object (via DragDropManager.getDDById()) and called lock(). This prevents it from receiving DnD events. When I'm done with the window, I call unlock(). Looking at the ExtJS3 DragDropManager code, it looks like this solution should work there as well. Hope this helps!