Results 1 to 10 of 10

Thread: [FIXED][3.0RC1.1] DataView containerclick bug in Chrome, Opera, Safari and Firefox

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member hanne's Avatar
    Join Date
    May 2009
    Posts
    42

    Default [FIXED] [3.0RC1.1] DataView containerclick bug in Chrome, Opera, Safari and Firefox

    In this example (which might be Ext2, yet it happens in Ext3 too), try this:


    1. select some items by dragging a selection [EDIT: and make sure you end your dragging on an item, not in whitespace]
    2. click in the whitespace (a.k.a. on the container) to deselect them


    For IE this works ok; for Chrome, Opera, Safari and Firefox you'll have to click a second time to actually deselect the items.

    If have narrowed it down to this fireEvent call (in Ext.DataView):



    The first time it won't get to the onContainerClick which should clear the selections.
    Last edited by hanne; 25 May 2009 at 9:16 AM. Reason: more accurate description of steps to reproduce

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I just did what you suggest, and it worked with no errors. Are there other steps needed to reproduce?

  3. #3
    Ext JS Premium Member hanne's Avatar
    Join Date
    May 2009
    Posts
    42

    Default

    Yeah, select them by dragging a selection... It seems to work ok otherwise...

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I see. The first click in whitespace has no effect. The second deselects.

  5. #5
    Ext JS Premium Member hanne's Avatar
    Join Date
    May 2009
    Posts
    42

    Default

    Exactly Thanks for the quick replies!

  6. #6
    Ext JS Premium Member hanne's Avatar
    Join Date
    May 2009
    Posts
    42

    Default

    Further investigation has revealed it's not a bug in Ext.DataView; it's a bug in Ext.DataView.DragSelector which comes with the example.

  7. #7
    Ext JS Premium Member hanne's Avatar
    Join Date
    May 2009
    Posts
    42

    Default

    This Ext.DataView.DragSelector.onEnd function...

    Code:
        function onEnd(e) {
            var sel = false;
            for (var i = 0, len = rs.length; i < len; i++) {
                var r = rs[i], x = e.xy[0], y = e.xy[1];
                sel = r.intersect(new Ext.lib.Region(y, x, y, x));
                if (sel) break;
            }
            if ((sel && !Ext.isIE) || (!sel && e.target != view.el.dom)) 
                view.un('containerclick', cancelClick);
    
            if (proxy) {
                proxy.setDisplayed(false);
            }
        }
    ...solves all known issues, except for the one where the user starts dragging and releases the mouse over some HTMLEditor.
    So maybe the Ext team can fix that last one before marking this topic as closed?

  8. #8
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    Why do you have all those checks to unbind the handler? What happens if you don't do that?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  9. #9
    Ext JS Premium Member hanne's Avatar
    Join Date
    May 2009
    Posts
    42

    Default

    The DataView generates a containerclick event whenever the user clicks on the whitespace.

    This is how a user selects items by dragging:


    1. user starts dragging (mouse down in container, onStart function fires)
    2. while dragging, items get selected when they intersect the dragging rectangle (onDrag function)
    3. user ends dragging (mouse up in container OR while over an item OR way out of the DataView, onEnd function fires)


    Now, for point #3:

    * IE will always fire a containerclick event. Since that containerclick event is programmed (in DataView) to deselect items, we need to cancel it (=the cancelClick function)

    * on Chrome, Opera, Safari and Firefox however, the containerclick event only fires when the user actually releases the mouse over the container. When the user releases the mouse over an item instead, the containerclick event doesn't fire so we don't need to cancel it. If we don't unbind it at that point, it will cancel the first containerclick event the next time the user clicks in the container, causing the bug I described in my first post.
    Code:
        function onEnd(e) {
            var sel = false;
            for (var i = 0, len = rs.length; i < len; i++) {
                var r = rs[i], x = e.xy[0], y = e.xy[1];
                sel = r.intersect(new Ext.lib.Region(y, x, y, x));
                if (sel) break;
            }
            if ((sel && !Ext.isIE) || (!sel && e.target != view.el.dom)) 
                view.un('containerclick', cancelClick);
    
            [...]
        }
    * on top of that, we also need to check whether the user released the mouse inside the DataView or not, because when the user starts dragging and drags way out of the DataView before releasing the mouse, the containerclick event also doesn't fire (on all browsers), yet the dragging has ended. If we don't unbind the containerclick event at this point, we also get the bug.
    Code:
        function onEnd(e) {
            [...]
    
            if ((sel && !Ext.isIE) || (!sel && e.target != view.el.dom)) 
                view.un('containerclick', cancelClick);
    
            [...]
        }

  10. #10
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    Fixed in SVN.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •