View Full Version : button click states

15 Jul 2010, 1:16 PM
The buttons I want to produce have a very different feedback than the out-of-the-box buttons.

The 'pressed' state is a graphic considerably larger than the 'off' state (a la iPhone buttons), so I can't simply flip the button graphic.

I tried to do this by putting some code under the handler to pop up a generic floating graphic in the right place. Problem is, the handler is only called upon button click, which means it doesn't execute until after the button up event. So it's useless for showing button press feedback.

I could do this by targeting the existing mousedown and mouseup events, or adding my own listener, but is there something already existing.

Alternately, if I am modifying this so much (adding my own graphics, feedback, and suppressing the existing feedback) maybe I should just dispense with using the button component altogether, and start with a more generic component?

What do you recommend?

22 Jul 2010, 3:30 PM
Will this work for you?

<link href="/css/ext-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/sencha/ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({ onReady: function () {
new Ext.Panel({ fullscreen: true,
layout: 'hbox',
items: [{ xtype: 'spacer' },
xtype: 'button',
ui: 'mask',
iconCls: 'settings',
cls: 'growButton'
{ xtype: 'spacer'}]
<style type="text/css">
-webkit-transform: scale(2);