PDA

View Full Version : click and dblclick listeners for the panel at the same time



alex007
6 Dec 2011, 6:21 AM
I have panel and want to listen click and dblclick at the same time. But with the following code I receive only 'click' event. How to create correct code?



Ext.create('Ext.Panel',{
height: 100,
width: 100,
border: 0,
renderTo: Ext.getBody();
html:'some text',
listeners: {
dblclick: {
element: 'el',
fn: function(){alert('dblclick')}
},
click: {
element: 'el',
fn: function(){alert('click')}
}
}
});

wallynm
6 Dec 2011, 6:41 AM
Well, before an double click be fired, the click it's called, and the alert it's showed, preventing the double click event, because the alert it's waiting for an answer.

Try to change the alert with console.log('') like this:

Ext.create('Ext.Panel',{
height: 100,
width: 100,
border: 0,
renderTo: Ext.getBody();
html:'some text',
listeners: {
dblclick: {
element: 'el',
fn: function(){console.log(('dblclick')}
},
click: {
element: 'el',
fn: function(){console.log(('click')}
}
}
});

:)

alex007
6 Dec 2011, 7:04 AM
Thanks a lot! :) Yes you are right. But because of 1 double click generates 2 click and 1 dblclick events, I created the following code (of course isDblClick is not a global variable):




Ext.create('Ext.Panel',{

height: 100,
width: 100,
border: 0,
renderTo: Ext.getBody();
html:'some text',
listeners: {
dblclick: {
element: 'el',
fn: function(){
isDblClick = true;
console.log('dblclick');
window.setTimeout(function(){
isDblClick = false;
}, 400);
}
},
click: {
element: 'el',
fn: function(){
window.setTimeout(function(){
if(!isDblClick) console.log('click');
}, 400);
}
}
}
});