You found a bug! We've classified it as EXTJS-9200 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    112
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default [4.2.0 GA] GridViewDragDrop issue if a select listener is long-playing

    [4.2.0 GA] GridViewDragDrop issue if a select listener is long-playing


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.0 GA
    Browser versions tested against:
    • IE9 - FAIL
    • Chrome - FAIL
    • FireFox - PASS
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • If a select listener takes some time, it can trigger drag&drop. It appears to be reproducible in IE9 and Chrome (a bit different results), but not in FireFox.
    Steps to reproduce the problem:
    • Select any cell
    The result that was expected:
    • No drag&drop
    The result that occurs instead:
    • drag&drop is somehow triggered
    Test Case:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>GridViewDragDrop issue if a select listener is long-playing</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
    
        <script src="../ext-all-debug.js"></script>
    
        <script>
            function sleep(milliseconds) {
                var start = new Date().getTime(),
                    i;
    
                for (i = 0; i < 1e7; i++) {
                    if ((new Date().getTime() - start) > milliseconds) {
                        break;
                    }
                }
            }
    
            Ext.onReady(function () {
                var data = [],
                    i;
    
                for (i = 0; i < 50; i++) {
                    data[i] = { test: "test" + i };
                }
    
                Ext.create("Ext.grid.Panel", {
                    renderTo: Ext.getBody(),
                    width: 400,
                    height: 400,
                    store: {
                        fields: [{
                            name: "test"
                        }],
                        data: data
                    },
                    columns: [{
                        text: "Test",
                        dataIndex: "test"
                    }],
                    selModel: {
                        listeners: {
                            select: {
                                fn: function () {
                                    sleep(3000); // a long delay just to get the issue 100% reproducible
                                }
                            }
                        }
                    },
                    viewConfig: {
                        plugins: {
                            ptype: "gridviewdragdrop"
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    HELPFUL INFORMATION

    O
    perating System:
    • Windows 7
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,051
    Vote Rating
    658
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    This is controlled by: http://docs.sencha.com/ext-js/4-2/#!...lickTimeThresh

    If you plan to do some blocking, long running operation you'll need to up that timeout. The simplest option is to kick off the selection stuff in a thread.

    Code:
    function sleep(milliseconds) {
        var start = new Date().getTime(), i;
    
        for ( i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > milliseconds) {
                break;
            }
        }
    }
    
    Ext.require('*');
    
    Ext.onReady(function() {
        var data = [], i;
    
        for ( i = 0; i < 50; i++) {
            data[i] = {
                test: "test" + i
            };
        }
    
        var grid = Ext.create("Ext.grid.Panel", {
            renderTo: Ext.getBody(),
            width: 400,
            height: 400,
            store: {
                fields: [{
                    name: "test"
                }],
                data: data
            },
            columns: [{
                text: "Test",
                dataIndex: "test"
            }],
            selModel: {
                listeners: {
                    select: {
                        delay: 1,
                        fn: function() {
                            sleep(3000);
                            // a long delay just to get the issue 100% reproducible
                        }
                    }
                }
            },
            viewConfig: {
                plugins: [{
                    ptype: "gridviewdragdrop"
                }]
            }
        });
        
        //Ext.dd.DragDropManager.clickTimeThresh = 10000;
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    112
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Thank you!

    Quote Originally Posted by evant View Post
    This is controlled by: http://docs.sencha.com/ext-js/4-2/#!...lickTimeThresh

    If you plan to do some blocking, long running operation you'll need to up that timeout.
    It is nice to know about this property, thank you!

    Quote Originally Posted by evant View Post
    The simplest option is to kick off the selection stuff in a thread.
    I guess you mean "delay: 1". I had to mention (forgot) that I tried it and was surprised that it didn't help.

    I tested more and discovered that it does help to avoid the issue in Chrome.

    But in IE9 it somehow stays. Though, increasing the delay seems help.

    What delay do you think would be enough to eliminate the issue at all? Because, the issue is sometimes reproducible even with "delay: 100".

    Maybe, 351? I mean bigger than the default 350 of the clickTimeThresh property.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,051
    Vote Rating
    658
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Not totally sure, I guess you'd need to tweak the values a bit. I realise the code is just for the sake of example, but I'd avoid doing anything that's blocking the UI for that long anyway.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    112
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Agree. But sometimes it is required. For example, filtering another store with many records on selection.

    Ok, I think tweaking a select's delay and the clickTimeThresh setting should finally help.

    Will you leave the thread opened? If so, what are you planning to do?
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 2