Add Tap Hold Event in Sencha Touch panel

Recently in one of my project, requirement was to display context menu when user tap and hold on sencha touch panel. We all know we can add itemtphold event on sencha touch list. But in my case I have to use panel. In this blog I will explain how to add tap hold event to sencha touch list.

The logic is simple , first of all we have to bind touchstart and touchend event on panel. When touch starts we will check after some interval if touchend event is fired or not. If there is no touch event fired that means user is still holding tap. See the code below.

{
      xtype: 'panel',
      html: 'tap and hold',
     listeners: {
                            painted: function(element){
                            var isTouch = false;
                            element.on({
                            touchstart: function(){
                            isTouch = true;
                            setTimeout(function(){
                            if(isTouch == true){
                                 //There is a tap hold
                            }
                            }, 2000);
                            },
                            touchend: function(){
                            isTouch = false;
                            }
                            });
                            }
                            }
}

As you can see in above code after touch start event we are setting timeout to check isTouch variable after two seconds. You can change the interval according to your need. If touch ends before two seconds we set isTouch to false. So after timeout when this variable is checked you will get false and tap hold event is not fired.  This way you can add tap hold event to any of the sencha touch component.