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
Related
I'm trying to achieve something fairly simple: use a controller to attach an event to a specific control, but am struggling to represent this using Sencha Architect.
I have a button named "Login-Button-Login".
In my controller, if I have the code:
config: {
control: {
"button": {
tap: 'onButtonTap'
}
}
},
onButtonTap: function(button, e, eOpts) {
Ext.Msg.alert("onButtonTap fired");
},
The the button works as expected. This is fine, but obviously it will apply to all buttons. I add a reference to "Login-Button-Login" (not my choice of name!):
config: {
refs: {
loginButtonTap: 'Login-Button-Login'
},
control: {
"button": {
tap: 'onButtonTap'
},
"Login-Button-Login": {
tap: 'onButtonTap2'
}
}
},
But how can I now use the reference "loginButtonTap" as an item in the control object? Whatever I try using the Sencha Architect controls I just end up with "Login-Button-Login" being referenced directly.
Relatedly, how can I link this controller to the "Login" view which contains the button? Surely I don't need to use full selectors for each reference? Clearly even if I could make this work, it currently would not function as Login-Button-Login needs to reference the "Login" view.
Just use an id (or itemId) of the control as the value of the controlQuery in event handler config:
config: {
control: {
"#btnWhatever": {
tap: 'onWhateverTap'
},
}
I prefer to use this method of attaching events to elements, since I am too lazy to do double work - specify the reference to the button, and then specify that reference in event handlers controlQuery. onWhateverTap gets the reference to the button as an argument and most of the time you do not need that reference anywhere else.
I'd like to be able to hide and show certain buttons in a navigation view bar when a view is push and popped onto the view stack. Shame I can't control that from the view config itself (but I'll save that moan for another time).
I wanted to know which events I should be using when a view is push/popped on a navigation view. The docs sometimes lie and I've been told many times not too trust it, so I'm not! Come on Sencha, Microsoft wouldn't get away with this!
So Any ideas? When I try to print out all the events for a view I get very unreliable behaviour:
What I've found:
When I push a view I get:
initialize
hide
show
When I pop a view I get:
hide
show
What the flip is going on?!?
The code to show events happening:
control: {
myViewRef: {
initialize: function() { console.log("initialize") },
activated: function() { console.log("activated") },
deactivated: function() { console.log("deactivated") },
painted: function() { console.log("painted") },
show: function() { console.log("show") },
hide: function() { console.log("hide") }
},
}
The code to actually push/pop a view:
onInBoxListViewItemTap: function(scope, index, item, record) {
console.log("onInBoxListViewItemTap");
var detailsView = this.getEnquiryDetailsViewRef();
// push view
var navview = this.getMyInboxViewRef();
navview.push(detailsView);
}
Does this stuff actually work properly i.e. Are there concrete events which are guaranteed to fire when a view is pushed and popped?
First of all - you have a typo in your code. You need to reference activate and deactivate not activate_d and deactivate_d.
Second, I would try to subscribe to push and pop events of navigation view and see if it would get you what you want.
I have the same problem.I use painted handler to solve it.
You can't handle 'painted' event in controller
the painted event description
I have a navigationView with some items on it, if I pop the item, and push a modified one back, the event listeners in my controller no longer trigger. How can I get them to work again? I don't get it because each item destroyed and created from scratch when I push it back. Autodestroy is enabled.
//Add a view
this.view = Ext.create('ec.view.view1')
this.getNavigation().push(this.view);
//Remove a view (or press back in the navigationview)
this.getNavigation().pop();
//Add a fresh view back
this.view = Ext.create('ec.view.view1')
this.getNavigation().push(this.view);
Controller tap handler
refs {
button : '#button'
},
control : {
button : {
tap: 'OnTap'
}
},
OnTap: function() { console.log("Tap") }
With the above, all the events, taps, etc break for the view
I had the same issue, search for loads of forums, lost lots of time, got angry about Sencha support and finally moved the button handler code from the controller back into the view:
xtype: 'button',
text: 'Save',
handler: function(button, event) {
console.log('button pressed');
}
"Dirty", but it works.
I suspect the cause of this behavior is NavigationView.pop() destroying the actual NavigationView, but not it's subordinate objects.
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)
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
});
},