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
    49
    Vote Rating
    1
    hhangus is on a distinguished road

      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!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar