Checkbox event handler not firing, even though box visibly changes state

[new boy]

I would expect the event handler to always fire, when the check visibly changes

When setting $form-field-height in scss a checkbox is created which does not behave as would be expected.

See my rather extreme example below, to demonstrate the problem.

Clicking on the lower parts of the check cause the check to change color, but the event handler. does not fire.
Clicking on the upper portion causes the expected behaviour to occur.

scss

$form-field-height : 32px ;

Essentials of Panel

Ext.define('MyProject.view.MyView', {
    extend : 'Ext.form.FormPanel',
    xtype : 'screen',
    config : {
        items : [{
            xtype : 'checkboxfield',
            name : 'boxname',
            style : 'font-size: 48pt',
            label : 'my label'
        }]
    }
})

Controller

Ext.define('MyProject.controller.Controller', {
            extend : 'Ext.app.Controller',
            config : {
                control : {
                    'screen component[name="boxname"]' : {
                        check : "onChangeCheck",
                        uncheck : "onChangeUncheck"
                    }
                }
            },
            onChangeCheck : function() {
                console.log("Check");
            },
            onChangeUncheck : function() {
                console.log("Uncheck");
            }
        });;

[new boy]

Sorry,
I forgot to add this information

Version tested:
Sencha touch 2

Browser versions tested against:
Chrome on Widows
Safari Mobile on IOS

The result that was expected:
Event handler to always fire if clicking on the checkbox causes it to change visible state

The result that occurs instead:
Whether event handler fires depends upon where on the check mark is clicked

[Jamie Avins]

Have you tried with 2.0.1 yet?

[new boy]

Tested on Sencha Touch 2.01, same problem.

[Jamie Avins]

Thank you for the report and details.

[new boy]

The problem appears to be that the div x-field-mask does not match the area where clicking causes the check to change visible state.

checkbug.jpg
The only work around I can find is to carefully manually set the $form-field-height so the x-field-mask covers the check mark and sufficient area around it, so the bug is not apparent to the user.

[new boy]

This problem appears to have become much worse in 2.0.1.1

With the checkbox code I had working under 2.0.0, now I've migrated to 2.0.1.1 sometimes the checkboxes change state on tap, and then change back again. Sometimes the adjoining checkbox also changes visible state.

I only see this problem when running on an iphone and an ipad. Seems to be ok on chrome on xp.

I can not find a work around for this.

The app is due to do live in a few days, now I have no way forward.

Does anyone have any suggestions?

Thanks in advance.

[rdougan]

Hi there,

I've looked into this issue and I cannot reproduce it using our default theme on any device.

Are you using a custom theme? Perhaps something in that is interfering with the tap mask?

[new boy]

Hi there

thanks for the feedback.

I'm not using a custom theme as such, but am using CSS (from SASS) to make the checkboxes smaller and closer together than the standard view.

It is quite possibly something interfering with the tap mask.

What I dont understand is

Is the 'tap mask' different from the x-field-mask? It appears to be on my extreme example above.
I can not see a div in chrome inspector which is called or looks like the tap mask, how do I find out what Sencha Touch is using for this?
How can I find out what is happening when the build is running on the iphone where the problem is most apparent?

Thanks

[new boy]

To take this a little further

if I comment out the following line

$form-field-height : 24px ;

from my current sass file the problem goes away, so this is presumably interfering with the tap mask.

Is there a work around way of styling the height of checkboxes without using $form-field-height?

Thanks again.