is there a smart and simple way to detect a doubletap without triggering a silgeltap in sencha touch?
thnx!
I don't think there is a 'clean' way to do it. It will delay the single tap option by 300ms which may be unacceptable. You may want to simplify your UI interactions if you can. Maybe a tap and hold?
I found this code in the Sencha Touch forums.
setupEventHandlers: function(){
this.mon(this.el, {
tap: function(e){
if(this.delayedTask == null){
//setup a delayed task that is called IF double click is not later detected
this.delayedTask = new Ext.util.DelayedTask(
function(){
this.doSomethingInteresting();
this.delayedTask = null;
}, this);
//invoke (with reasonable time to cancel)
this.delayedTask.delay(300);
}
},
doubletap: function(e){
//cancel and clear the queued single click tasks if it's there
if(this.delayedTask != null){
this.delayedTask.cancel();
this.delayedTask = null;
}
//handle the double click
this.doSomethingReallyInteresting();
},
scope: this
});
},
Related
I'm having trouble with a click event on a sprite in CreateJS. The event isn't firing as expected. I've tried:
button.addEventListener("click", function() { alert('test'); });
and
button.on("click", function() { alert('test'); });
Neither of them fire on click event. Any ideas?
I found my problem. I forgot to enable the mouse on the stage.
e.g.
var stage = new createjs.Stage("canvasId");
//Children of container can dispatch mouse events
stage.mouseChildren = true;
//EaselJS checks 10 times per second what's under mouse pointer
stage.enableMouseOver(10);
CreateJS mouse events tutorial
How can I implement Hammer.js to catch only swipeLeft and swipeRight events on devices without mouse?
In the source code of hammer.js I found that a var INPUT_TYPE_MOUSE = 'mouse'; exists. In the documentation I did not find how to disable it with the options.
Have I to disable all recognizers in a preset if I only want to use the swipe recognizer?
preset: [
// RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
[RotateRecognizer, { enable: false }],
[PinchRecognizer, { enable: false }, ['rotate']],
[SwipeRecognizer,{ direction: DIRECTION_HORIZONTAL }],
[PanRecognizer, { direction: DIRECTION_HORIZONTAL }, ['swipe']],
[TapRecognizer],
[TapRecognizer, { event: 'doubletap', taps: 2 }, ['tap']],
[PressRecognizer]
],
How can I do this by the options?
To use only Swipe recognizer you can do this:
var mc = new Hammer.Manager(element, managerOptions);
mc.add(new Hammer.Swipe(recognizerOptions));
mc.on('swipeleft', leftSwipeHandler);
mc.on('swiperight', rightSwipeHandler);
It's described in More Control Section in documentation.
This will recognize swipe not only in touch devices but also in those that use mouse. I don't know how to disable firing this event in mouse devices. But I think that after event's been fired you can check in handler function what kind of pointer caused the event. Use event's pointerType property for that purpose:
var leftSwipeHandler = function (event) {
if (event.pointerType === 'mouse')
return;
// some more code
}
If you use jquery plugin then this property is in gesture object: event.gesture.pointerType.
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
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...
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 :
https://www.sencha.com/forum/showthread.php?173374-Ext-override()-on-Ext-components-in-ExtJS-4-x
Best practice for overriding classes / properties in ExtJS?
this post
QA just filed a real doozy of a bug, and I'm scratching my head how to fix it.
If two buttons, e.g. back, and search are pressed at the same time, each will invoke Ext.dispatch, causing two simultaneous opposing transitions! This totally !##$s up the layout, rendering the app unusable.
This is really a general problem with touch-enabled apps... with multiple fingers hovering over the screen, the user can easily trigger weird and totally incompatible action combinations, and the app needs to accept only one at a time. Is there any way to handle this situation gracefully in Sencha Touch?
I fixed it by listening to the before-dispatch event, and canceling it if there is a dispatch already in progress.
Ext.regApplication(...
this._isDispatching = false,
launch: function() {
Ext.Dispatcher.on('before-dispatch', function () {
var me;
if (this._isDispatching)
return false;
else {
this._isDispatching = true;
me = this;
setTimeout(function () {
me._isDispatching = false;
}, 500);
return true;
}
}, this);
}
Yes, the 500ms delay is definitely hacky, but I couldn't think of a more robust way of detecting when the transition has completed. There is no after-dispatch event, and the dispatch event fires before the transition has completed.
Hope this helps someone.
Sencha Touch 1.1.1 --
Is there a way to set up a listener to listen for click events on the Back button of a NestedList? I can only find examples of how to set up for clicks on the 'body' or 'el' element. How would you be more specific and target the NestedList's back button?
Many Thanks
Code so far
MyTest.views.Justacard = Ext.extend(Ext.NestedList, {
title: "The Title",
...
listeners: {
click: {
element: 'el', // ANYTHING HERE TO TARGET THE BACK BUTTON?
fn: function(){
// do action
}
}
}
});
Ext.reg('justacard', MyTest.views.Justacard);
On a side note: because the NestedList component adds the back button automatically, there's no opportuity to configure it and add a handler (I think).
PS: adding the following code (below title: for example) allows me to respond to the Back button clicks - however, it also removes all the normal Back button functionality and the NestedList no longer slides back to the parent list.
onBackTap: function() {
alert('boo');
}
Turning into a proper 'lumpy carpet' scenario ; )
Try
MyTest.views.Justacard = Ext.extend(Ext.NestedList, {
title: "The Title",
...
listeners: {
back: function() {
alert('back?');
}
}
});
or
onBackTap: function() {
this.callParent(arguments);
alert('boo');
}
P.S. Sorry, I didn't test this (just looked at sources)