PDA

View Full Version : Capturing a MouseDown on a button



DaveC426913
28 Jul 2010, 10:47 AM
I pulled this from one of the button examples:


items: [{
xtype: 'container',
defaults: {
scope: this,
handler: this.tapHandler
},
layout: 'hbox',
items: [
{ xtype: 'button', text: 'Q'},
{ xtype: 'button', text: 'W'},
etc.

tapHandler: function(button, event){
console.log(event);
//Ext.getCmp('hilite').setVisible(true);
etc.

tapHandler() only gets called upon completion of the tap (mouseup). I want to add my own feedback (a graphic overlay) as soon as the button is pressed (not when it's released).

meyerovb
30 Jul 2010, 6:49 PM
On my iPhone so no acces to the docs, but off the top of my head I think setting an active class on the component might do it. Let me know if that works.

evant
30 Jul 2010, 9:57 PM
There's a config option pressEvent, so for example you could set that to whatever event you wanted and the button handler will fire.

Other than that, you could just subscribe to a DOM event on the underlying element.

DaveC426913
3 Aug 2010, 5:53 AM
...you could set that to whatever event you wanted and the button handler will fire...

Oh I see, thanks.

OK, next question: how do I know what valid events there are for a button? All the public events listed have to do with rendering of the button or other aspects of button administration. I'm looking for events such as 'button Down', 'button Up' or maybe 'button Drag'.

DaveC426913
3 Aug 2010, 7:30 AM
OK, doing a wide code search on pressEvent, I stumbled across some events in the Button class called tapstart and tapcancel. tapstart seems to do the trick.

Are these events documented somewhere in the API? I did a search on them which turns up nothing at all. I could use some pointers on how to find these answers myself instead of constantly posting them to the forum. If not in the API, would would these events be listed?

merry andrew
3 Aug 2010, 8:00 AM
Have you tried searching through the file "ext-touch-debug-w-comments.js" with a text editor and the Find operation?

DaveC426913
3 Aug 2010, 8:19 AM
Yes, I found touchstart and touchend. I'm still wondering if I'm doing this correctly.

I can trap touchstart, which is perfect, but how do I trap both events? I'll want my key hilight to disappear once the user takes his finger off the button, so I want to trap the touchend event too. I'm currently trying to reassign the pressEvent within the touchstart code:



touchStartHandler: function(button, event){
//process button down
button.pressEvent = 'touchend';
button.setHandler('touchEndHandler',this);
}

touchEndHandler: function(button, event){
//process button up
},

Seems to me this should work. If I examine the button object using Chrome's developer console, I can even see it handler is set to touchEndHandler and its pressEvent is set to touchend. But it does not fire the touchend event when the button is released.

Same here:


touchStartHandler: function(button, event){
//process button down
button.mon(this,'touchend',this.touchEndHandler, this);

},

DaveC426913
3 Aug 2010, 11:02 AM
Definitely not understanding here.

This is what I'm thinking:




handler: this.touchStartHandler,
pressEvent: 'touchstart',


touchStartHandler: function(button, event){
//process button press
alert("button pressed...");
button.pressEvent = 'touchend';
button.handler = 'touchEndHandler';

}

touchEndHandler: function(button, event){
//process button release...
alert("button released...");
},


I process the button press, then set the button's press event to touchend, and its handler to touchEndHandler.

Theoretically, when I release the button, it should trigger touchend event, which should call touchEndHandler function.

It doesn't.

I can force the touchEndHandler function, thus:




touchStartHandler: function(button, event){
//process button press
alert("button pressed...");
button.pressEvent = 'touchend';
button.handler = 'touchEndHandler';

this.touchEndHandler(button,'touchend');
}


Which works, but fires too soon (with touchsstart rather than touchend).

DaveC426913
4 Aug 2010, 6:14 AM
I'm sorry guys. I have tried everything I can think of. I simply cannot figure out how to trap both a touchstart and a touchend on the same button. Every method I've tried does not work.

Unless someone has some insight, I am giving up.

hendricd
4 Aug 2010, 7:02 AM
@Dave--
What are you trying to achieve between those two events?
(The Button class already adds a useful className 'x-button-pressed' on touchStart and removes it on touchEnd.)

DaveC426913
4 Aug 2010, 7:08 AM
I am not simply applying CSS, I am programmatically adding a hilite graphic over top of the key, positioning it and populating it with the appropriate character. The hilight graphic is significantly larger than the button it overlays - and it overlays other adjacent buttons as well, and it has dynamic text - all reasons why CSS won't work.

The hilite should appear over the button when it is pressed and should disappear when released.

But since I cannot seem to trap both a tapstart and a tapend, I'm going to have to rip out everything I've done and rethink my hilight state.

hendricd
4 Aug 2010, 7:22 AM
@Dave--

Just hook in! ;)




new Ext.Button({
text : 'Click Me',
listeners : {
afterrender : function(){
this.mon(this.el, 'tapstart', this.touchStartHandler, this);
this.mon(this.el, 'tapcancel', this.touchEndHandler, this);
}
},
touchStartHandler: function(button, event){
//process button press
console.log("button pressed...");

},

touchEndHandler: function(button, event){
//process button release...
console.log("button released...");
}
});

DaveC426913
4 Aug 2010, 7:37 AM
OK that provides a new avenue for exploration, thanks.

It does not work, but I'll keep trying.

Here's how I've implemented it:



xtype: 'container',
defaults: {
scope: this,
handler: this.touchStartHandler,
pressEvent: 'touchstart',
},
layout: 'hbox',
items: [
{ xtype: 'button',
text: 'Q',
listeners: {
afterrender: function(){
this.mon(this, 'touchstart', this.touchStartHandler, this);
this.mon(this, 'touchend', this.touchEndHandler, this);
}
},
},
{ xtype: 'button', text: 'W'},
etc.

touchStartHandler: function(button, event){
alert("begin!");
},
touchEndHandler: function(button, event){
alert("end!");
},


As is the case in all my other attempts, touchEndHandler is simply never called.