1. #1
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    41
    Answers
    1
    Vote Rating
    3
    caballero is on a distinguished road

      0  

    Default Answered: checked attribute

    Answered: checked attribute


    I'm still a little green with ext js.

    I set up the following functions.
    The first one works and the second one does NOT.


    var checkall = function(){
    Ext.select('input[type=checkbox]').set({checked:true});
    }


    var uncheckall = function(){
    Ext.select('input[type=checkbox]').set({checked:false});
    console.log('uncheck');
    }

    Can someone enlighten me as to the problem.
    It doesn't throw an error. Just doesn't work.

    thanks.
    Jeff

  2. Yes, a bit of a challenge, but I learned some good stuff while investigating! This is how checking/unchecking checkboxes should ideally be done in ExtJS:
    Code:
    var checkall = function() {
        Ext.select('input[type=checkbox]').set({checked: true}, false);
    }
    
    var uncheckall = function() {
        Ext.select('input[type=checkbox]').set({checked: false}, false);
    }
    Normally, Ext.Element.set() uses the DOM method HTMLElement.setAttribute() under the hood, but what we want in this case is not setAttribute('checked', false), but rather removeAttribute('checked'), since the checked state of the checkbox depends on whether or not the attribute is present, not its value. Passing the optional second parameter as false indicates that the set method should bypass the normal setAttribute() call and set the property directly on the underlying DOM element, which is what we want. The underlying effect is exactly the same as your workaround of "el.dom.checked=false", but is a bit cleaner-looking. The parameter is in the docs here, but without much explanation. If you follow the link to the source, however, it becomes readily apparent what is going on.

    Hope that answers things for you! And thanks for the interesting question - I certainly learned a lot in my poking around to figure it out!

  3. #2
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    41
    Answers
    1
    Vote Rating
    3
    caballero is on a distinguished road

      0  

    Default update

    update


    so it appears that both functions behave exactly the same.

    Calling the uncheckall function actually checks all checkboxes.

    And it will only works once.
    Each additional call to the functions bring no change.

    This has to be an easy problem for the smart people on the board.
    What am I doing wrong? And help me understand why.

    Jeff

  4. #3
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    41
    Answers
    1
    Vote Rating
    3
    caballero is on a distinguished road

      0  

    Default work a round

    work a round


    well, i still would like to know why the code does not work, but I've got a workaround.


    var checkall = function(){
    //Ext.select('input[type=checkbox]').set({checked:true});
    Ext.select('input[type=checkbox]').each(function(el, scope, index){el.dom.checked=true;});
    }


    var uncheckall = function(){
    //Ext.select('input[type=checkbox]').set({checked:false});
    Ext.select('input[type=checkbox]').each(function(el, scope, index){el.dom.checked=false;});
    console.log('uncheck');
    }

    Anyone want to tell me why the first version didn't work?

  5. #4
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    41
    Answers
    1
    Vote Rating
    3
    caballero is on a distinguished road

      0  

    Default


    142 views and no answers?
    Thought this would be an easy one for the people on this forum.
    I would still like to know why the first functions didn't work.
    Anyone up to the challenge?

  6. #5
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Answers
    42
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      1  

    Default


    Yes, a bit of a challenge, but I learned some good stuff while investigating! This is how checking/unchecking checkboxes should ideally be done in ExtJS:
    Code:
    var checkall = function() {
        Ext.select('input[type=checkbox]').set({checked: true}, false);
    }
    
    var uncheckall = function() {
        Ext.select('input[type=checkbox]').set({checked: false}, false);
    }
    Normally, Ext.Element.set() uses the DOM method HTMLElement.setAttribute() under the hood, but what we want in this case is not setAttribute('checked', false), but rather removeAttribute('checked'), since the checked state of the checkbox depends on whether or not the attribute is present, not its value. Passing the optional second parameter as false indicates that the set method should bypass the normal setAttribute() call and set the property directly on the underlying DOM element, which is what we want. The underlying effect is exactly the same as your workaround of "el.dom.checked=false", but is a bit cleaner-looking. The parameter is in the docs here, but without much explanation. If you follow the link to the source, however, it becomes readily apparent what is going on.

    Hope that answers things for you! And thanks for the interesting question - I certainly learned a lot in my poking around to figure it out!

  7. #6
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    41
    Answers
    1
    Vote Rating
    3
    caballero is on a distinguished road

      0  

    Default


    Brilliant!
    Thank you burnnat for the complete explanation I was looking for.
    How did I survive these many years of javascript without knowing the term 'expandos'?

    It's important for me to understand why stuff fails if I'm going to master Extjs.
    I wish Extjs used more examples in there documentation/manual.
    jQuery does this and makes learning their framework a breeze.

    Thanks again.

Thread Participants: 1