Extending Ext.Button for better UX and responsive tap

[roycyang]

Quick update. Been testing it in iOS and works great, no bugs to report and def production ready. Now to work on the same logic for a button in a scrollable container!

[prasanna_hr]

Thanks for the feedback guys.

Updated FixedButton so that it's tied to X/Y coordinates so it now works in iOS. I'm assuming it will also work in Android/Blackberry as the code is pretty standard. Essentially when you tap a button, I record the offsets and height and width and then compare that to the x/y coordinates on touchmove and touchend.

One caveat is that this will unfortunately NOT work in a scrolling container as the scrolling changes the X/Y coordinate calculation. There needs to be a lot more logic and deeper integration into ST2 for this to work successfully in scrolling containers. Based on SunboX's post, we could port this UI over to be a good disclosure icon for a list but that's another day!

Nice work. Quite useful. We are planning to use it. However, I have one question

The function 'setMaskSize' is called only the mask is visible (tapMask == true). The issue with this is that we can't control the size and position of the mask (span) when it is invisible. Why is that? This is posing us a challenge to use it when we have a tool bar button that is docked right.

Thanks
Prasanna

[roycyang]

Prasanna,

It shouldn't be set only on tapMask, that is an oversight on my part. I'll check out the code and push a fix to the repo.

Roy

[roycyang]

EDIT:

Prasanna,, I updated the git to reflect the logic fixes. Now there is a setMaskSize and a setMaskColor. setMaskSize will always get called, thanks for the heads up.

[prasanna_hr]

Roy,

Thanks for your quick action on this.

Prasanna

[jep]

This is QUITE an improvement on the stock button.

[wprater]

I was surprised to see that ST2.1 beta still has the same tap issues. Seems to me it's a major usability issue and was one of the reasons we ditched ST2 to go native on a larger app we build recently.

Great work on this extension.

[jep]

Agreed. I wonder if it couldn't be made as a patch to the existing Button so it'd get applied everywhere.

[jbondc]

Thanks for this work, much better usability!

[roycyang]

Just a quick update, I've been using the buttons on an iPad app and it's been working great. I'm in the process of cleaning up the application and making it open source on GITHUB. Once I do that, I'll throw a link in here, it is a Sencha Touch 2 app that uses:

• Phonegap
• Node.js
• LocalStorage proxy for model/stores
• Almost all Sencha Touch UI elements, highly customized
• Compass/SASS extensively
• OAuth JS
• Infinite, buffered carousel
• Retina media queries

There's other goodies - hopefully I'll get to release it by end of month!