Double click on buttons inside the app could provide UI corruptions

Question

Double clicking fast on a button in Sencha Touch 2 when having a navigation view will on some Android device push the new view twice on the view stack, how to solve it? Doesnt happen on iPhone

yes I have noticed this problem. in chrome browser also same issue is duplicated. http://stackoverflow.com/questions/11522736/sencha-touch-clicking-a-button-rapidly-will-push-a-view-twice — amrit_neo, Dec 07 '12 at 07:21

score 2 · Answer 1 · answered Dec 07 '12 at 17:58

If you're having problems with the single click, then wrap the event function in a delayed task... for instance:

tap: function(button, e, eOpts) {
    if(this.delayedTask == null){            
        this.delayedTask = Ext.create('Ext.util.DelayedTask', function() {
            this.myFunctionToCall();
            this.delayedTask = null;
        }, this);
        this.delayedTask.delay(500);
    }
}

So in the example above, if another tap is registered and this.delayedTask has yet to be null, then it will not create the new delayed task which ultimately calls whatever function you need after 500 miliseconds... hope this makes sense, it's also a way to create double tap events on buttons...

score 0 · Answer 2 · answered Apr 11 '18 at 11:35

This issue is a bit old but I was facing the same issue in the app I'm working on in my company. This is especially frustrating when buttons are bound to an Ajax call.

I took back Jeff Wooden's solution to override every button in my app :

Ext.define('MyApp.override.CustomButton', {
   override : 'Ext.Button',


   doTap: function(me, e) {

       if(this.delayedTask == null){      
           this.callOverridden(arguments); 

           this.delayedTask = Ext.create('Ext.util.DelayedTask', function() {
               this.delayedTask = null;
           }, this);
           this.delayedTask.delay(500);

       } else {
           console.log("Preventing double tap"); 
       }
   }
});

How does it works?

Each button action will trigger a delayedTask which will intercept button action for 500 ms, therefore preventing doubletap
This will work for 'tap' and 'handler:', which both pass through 'doTap' method
this is linked to the current button so it won't reverberate on other buttons

To use it simply add it in your app.js 'requires' block

        Ext.application({
        requires: [
            ...
            'MyApp.override.CustomButton',
            ...
             ],

Helpfull Sources :

Double click on buttons inside the app could provide UI corruptions

2 Answers2