PDA

View Full Version : Handle double click of a button as single click?



jeotte
14 Oct 2016, 10:01 AM
I have a button that when you click it, it makes an ajax call and refreshes the screen. However, if the user double clicks the button, the screen flickers and doesn't display what it should. Obviously there is a timing issue because if I stop on breakpoints in the code, it will work/display as it should. Ideally the users wouldn't double click this button, but in case they do, I'd like to be able to handle it and have my page display what it should. I tried disabling the button after it was initially clicked and re-enabling, but that didn't work great for me. Then I came across DelayedTask, and I'm wondering if that's what I need.

Also, I'm new to EXTJS, so please forgive me for not understanding everything. And, we're using extjs 4.2.2.

Here's how the button is event is currently being set up:




Ext.define('controller.Header', {
extend: 'Ext.app.Controller',
id:'header',
views:['header.Header'],
stores:['StartupSettings'],
init: function() {
this.control({
'#header-sectionbar button[action=showEvents]':{
'click': this.showEventsHandler
}
});
}
.
.
.
showEventsHandler: function() {
//do stuff
//call other methods that eventually fire off an ajax request
}
});



Is the best solution for me to change it to this? It seems to work, but is it correct to do it this way? (The part I changed is in red)




Ext.define('controller.Header', {
extend: 'Ext.app.Controller',
id:'header',
views:['header.Header'],
stores:['StartupSettings'],
init: function() {
var task = new Ext.util.DelayedTask(this.showEventsHandler, this);
this.control({
'#header-sectionbar button[action=showEvents]':{
'click': function() {
task.delay(500);
}
}
});
}
});

Gary Schlosberg
14 Oct 2016, 3:56 PM
Have you looked at the buffer config?
http://docs.sencha.com/extjs/4.2.3/#!/guide/events-section-using-a-buffer-configuration

jeotte
17 Oct 2016, 8:52 AM
That definitely sounds like what I need. Thanks!