Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

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

    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
    Code:
    $form-field-height : 32px ;
    Essentials of Panel
    Code:
    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
    Code:
    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");
                }
            });;

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

    Default Additional Information

    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
    Last edited by new boy; 26 Apr 2012 at 5:31 AM. Reason: formatting

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    Have you tried with 2.0.1 yet?

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

    Default

    Tested on Sencha Touch 2.01, same problem.

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    Thank you for the report and details.

    Sencha Inc

    Jamie Avins

    @jamieavins

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

    Default

    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.

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

    Default NO WORKAROUND for 2.0.1.1 Help!

    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.
    Last edited by new boy; 29 Aug 2012 at 7:49 AM. Reason: extra info added

  8. #8
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    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?
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

    Default

    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

  10. #10
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

    Default

    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.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •