View Full Version : Double single click and double click in editor grid problem

21 Jan 2011, 12:19 AM
Hi all.

I am using a EditorGridPanel in which i have one cell that is editable. On single click the cell turns in TextField. The problem is that i need to some things when i double click row, but double click works only on cells that are not editable. I think that it is because the browser fires two single click events before the doubleclick event and that the cell turns in to a textfield that is a different object.

I have seen many posts of this, but none of them have found a correct answer to this. I am starting to worry if it is even possible.

The code from grids columns for the editable cell:

clicksToEdit : 1,
columns: [
header: 'Nosaukums',
dataIndex: 'title',
width: 250,
sortable: true,
editor : this.title_edit


Code for cell`s editor:

this.title_edit = new Ext.form.TextField();

For the double click event i am using rowdblclick event

rowdblclick : function(grid, rowIndex, e) { .... }

Is it even possible and what are workarounds to this problem. I was thinking of somehow setting the timeout to editor, but i think even if it works, it isn't the correct way to do this.

Any help appreciated.

21 Jan 2011, 3:59 AM
Am i really the only one concerned by this problem?

21 Jan 2011, 9:50 PM
make 2 listeners on your cell:
- onclick, return false
- ondblclick send a click event
may this help ? :-)

22 Jan 2011, 5:18 AM
Thanks for your replay, but i don't think that this is going to help me because i have a event on single click on that cell which calls the editor.

22 Jan 2011, 8:05 AM
There is no perfect solution for this.

You could do an inline override of the onCellDblClick method (don't let the name fool you - it's used for single click too) of the grid and start a DelayedTask to perform the original onCellDblClick method. When the rowdblclick event is fired, cancel the delayed task.

The problem with this is that you need to specify a delay for the task. You don't want to set it too long, because the user will think your app is slow, but you also don't want to set it too low, because some users could have set a really long double click delay in their OS.

22 Jan 2011, 9:11 AM
It is bad that ExtJS doesn't have a simple solution for this problem. I will try to do what you suggested me this monday and post back my results. Thanks for your replay.

22 Jan 2011, 10:08 AM
A little different, you can try:
- define a variable "lastTimeAccess" for example, and initialize it to 0
- then, on the click handler compare (currentTime - lastTimeAccess). if for example te result is less than, for example 400ms (if you decide that the slowest doubleclick means 2 clicks with maximum 400ms difference), then let the click event happen normally (so editing your cell), then set lastTimeAccess=currentTime and return. Else (if difference bigger or equal to 400mm) => lastTimeAccess=currentTime and return false (so without editing)...

Is a bad practice, I agree... But you cannot imagine the number of times when this kind of (very short and very quick also) "bad" practice help me on lots of very shorts client's delays... anyway, you right, is a bad practice.

22 Jan 2011, 12:05 PM
It is bad that ExtJS doesn't have a simple solution for this problem.

I disagree. It's bad coding practice to mix click and double-click on the same element.

I would use an 'edit' icon to activate the cell editor, so users don't assume they can double-click anywhere on the row.