checked attribute

[caballero]

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

[caballero]

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

[caballero]

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?

[caballero]

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?

[burnnat]

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:

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!

[caballero]

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.