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

Thread: Checkbox does not fire "change" event on the first change after setRawValue(true).

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-10684 in 4.2.3.
  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    27
    Vote Rating
    0
      0  

    Default Checkbox does not fire "change" event on the first change after setRawValue(true).

    The problem appears is you use setRawValue() method. Method setValue() works fine.
    Before checkbox render just use component.setRawValue(true); and put some listener for "change" event. You'll see that for the first time when you uncheck the checkbox listener will not work.

    Sample project is in attachment. Thanks.

    *EDIT BY SLEMMON
    Steps:
    • Click the button => the checkbox gets checked
    • Click the checkbox

    Inline test case:
    Code:
    var checkbox;
    
    
    Ext.create("Ext.button.Button", {
        renderTo: Ext.getBody(),
        text: "setRawValue",
        handler: function () {
            checkbox.setRawValue(true);
        }
    });
    
    
    checkbox = Ext.create("Ext.form.field.Checkbox", {
        renderTo: Ext.getBody(),
        boxLabel: "Checkbox",
        listeners: {
            change: function () {
                console.log("change");
            }
        }
    });
    Attached Files Attached Files
    Last edited by slemmon; 16 Jul 2013 at 1:38 PM. Reason: additional test notes

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    27
    Vote Rating
    0
      0  

    Default

    Please, see docs for setRawValue method. It says "Sets the checked state of the checkbox.". So, if the checkbox is checked and I uncheck it, I presume that "change" event should be fired, as the value and state are changed.

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Vote Rating
    249
      0  

    Default

    I believe this is by design.

    Using setRawValue circumvents the change detection mechanism. Using setValue (clicking the checkbox calls setValue()) will then do a check in the field mixin to see if the value has changed. Since the validation was circumvented with setRawValue it doesn't see that the value has changed and so doesn't fire the changed event.

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    27
    Vote Rating
    0
      0  

    Default

    But that's exactly what I'm talking about. I use setRawValue as I want to circumvent the change detection mechanism. Ok, the value is set, no event is fired. Now I start to work with my app and I presume that the next "change" event will be fired as I don't use setRawValue any more.

    So, now the event is not fired 1 time on setRawValue (it's by design) and second time right after that (and this is definitely a bug, isn't it? ).

    I mean that events should not be fired on setRawValue, but the internal state should be changed. If not, then why UI shows that the checkbox is checked while the internal state is "false".

    Quote Originally Posted by slemmon View Post
    I believe this is by design.

    Using setRawValue circumvents the change detection mechanism. Using setValue (clicking the checkbox calls setValue()) will then do a check in the field mixin to see if the value has changed. Since the validation was circumvented with setRawValue it doesn't see that the value has changed and so doesn't fire the changed event.

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,017
    Vote Rating
    125
      1  

    Default

    Hi @slemmon,

    +1 to it is a bug.

    REQUIRED INFORMATION

    Ext version tested:

    • Ext 4.2.1 GA

    Browser versions tested against:
    • Chrome
    • IE9

    DOCTYPE tested against:
    • <!DOCTYPE html>

    Description:
    • An unchecked checkbox. A setRawValue(true) call occurs and the checkbox is checked now. Click that checkbox, it gets unchecked, but its change event is not fired.

    Steps to reproduce the problem:
    • Click the button => the checkbox gets checked
    • Click the checkbox

    The result that was expected:
    • The change event fires

    The result that occurs instead:
    • The change event doesn't fire (it fires on the second click)

    Test Case:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>setRawValue call on Checkbox causes that it doesn't fire change on next click</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
        
        <script src="../ext-all-dev.js"></script>
    
        <script>
            Ext.onReady(function () {
                var checkbox;
    
                Ext.create("Ext.button.Button", {
                    renderTo: Ext.getBody(),
                    text: "setRawValue",
                    handler: function () {
                        checkbox.setRawValue(true);
                    }
                });
    
                checkbox = Ext.create("Ext.form.field.Checkbox", {
                    renderTo: Ext.getBody(),
                    boxLabel: "Checkbox",
                    listeners: {
                        change: function () {
                            console.log("change");
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Vote Rating
    249
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  7. #7
    Sencha User
    Join Date
    May 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Hello, Any updates on this issue? workaround perhaps? we encounter the same bug.

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    27
    Vote Rating
    0
      0  

    Default

    Workaround is to use setValue() instead of setRawValue().

  9. #9
    Sencha User
    Join Date
    May 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Hello, We would like to know when the fix will be available? the workaround wont work for us, it will hurt performance as to we have a number of check boxes we need to set its value.

  10. #10
    Sencha User
    Join Date
    May 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Hello,

    We would like to follow-up when would be the fix release for this bug? we really needed a fix for this ASAP.

Page 1 of 2 12 LastLast

Posting Permissions

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