Results 1 to 6 of 6

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

    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
    1,017
    Vote Rating
    125
      0  

    Default [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
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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
    18,600
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  4. #4
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,017
    Vote Rating
    125
      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.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,600
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  6. #6
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,017
    Vote Rating
    125
      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?
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

Posting Permissions

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