Home > Ext Js, JavaScript > Ext JS Grid – rowclick and rowdblclick Issues

Ext JS Grid – rowclick and rowdblclick Issues

Last week I found an interesting issue regarding the rowclick and rowdblclick events. Here is the scenario:

I have a page with an Ext JS Grid populated with some data that the user can act upon – edit fields, show field specific context menus, do some operations, etc. There is this specific requirement that the user can single click and double click a row. These are completely different actions, therefore a different operation must be performed. However due to the intrinsic browser behavior of the click event when you double click the result is somewhat unexpected – two click events and one double click event are fired. And this is where all the problems began – the code for the click event is executed twice before the double click event even though you would expect only the double click event handler to be called.

Note: I made my tests on Firefox, Google Chrome and Internet Explorer 8. Double click caused a single click event to be fired only on IE8.

Here is a screenshot of the event firing sequence in Firefox when you double click on a grid’s row:

rowclick browser behavior

rowdblclick Default Browser Behavior

This browser behavior caused some performance issues for my application, so I had to come up with some kind of a workaround.

Workaround

I came up with a simple solution which defers the call to the rowclick event handler in time so that the rowdblclick event handler be called and use a helper variable to indicate that double click took place. Here is the rowclick event handler:

'rowclick': function(){
    window.setTimeout(function(){
        if (!isDblClick) log.innerHTML += '<div>row click</div>';
    }, 0);
}

Calling the system function setTimeout even with 0 milliseconds does not mean that the code will be executed right away. The reason for that is that setTimeout is not executed as high priority function and the interval that it waits will be more than what you have specified. This little trick causes the rowclick event to be fired only once before the rowdblclick event. If you want to completely be sure that it won’t be fired just increase the interval as much as you find appropriate. But keep in mind that it should be reasonably small as you would want the rowclick event handler to be executed fast enough when the user performs a single row click.

Here is the rowdblclick event handler code:

'rowdblclick': function(){
    isDblClick = true;
    log.innerHTML += '<div>row double click</div>';

    window.setTimeout(function(){
        isDblClick = false;
    }, 0);
}

At the end of the event handler the helper variable isDblClick is set to false so that you would be sure that the rowdblclick event handler is done. Again you could set a greater interval if you need to. The following screenshot shows what is the the output of the rowdblclick event with this workaround in place:

rowclick browser behavior workaround

rowdblclick Browser Behavior Workaround

If you want to be certain that only the rowdblclick event handler would be executed you could increase the deferring of the rowclick event handler. You could download the source code for this workaround from here.

Summary

This is just a simple workaround for this issue that partially fixed my performance issues – I made some other code tweaks that drastically improved the speed of execution. As an overall result the time of execution dropped more than 2.5 times. However, be advised that this is not a bulletproof solution for the problem – it depends on the performance load of the browser and how long it takes for your event handler to finish executing. The best advise I can give you though is to use only one of these events if it is appropriate for your scenario. If this is not an option then you could use this workaround or some other tricks.

Advertisements
Categories: Ext Js, JavaScript
  1. September 6, 2010 at 12:45 pm

    Thanks for this. I’d been struggling with this issue with several grids where a single click updated a panel and a double opened a form. Normally this wasn’t an issue as the panel update was irrelevant but on one or two some additional stores were being loaded and that caused the double click to fail.

    Anyway your solution just saved me several hundreds hairs on my head I think.

    thanks again

  2. challenger
    June 10, 2013 at 2:04 pm

    Thank you very much for your solution. It made me crazy!!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: