In one of my application, I faced one issue with radio button.
My requirement was in menu list [which consist of checkbox and radio button], when I marked as checked, group title tooltip should give list of checked menu.
It work fine in case of checkbox, when ever I checked/unchecked any check box, it update the tooltip list.
But in case of radio button, it always display the last checked message list [one radio button by default checked]
By going through the radio button default behavior I got following details:
- Radio was built as a subclass of Checkbox
- When you turn a checkbox on/off, the checkbox received a DOM event because they were clicked
- But in radio button this is not the case. The previously active radio does not receive a DOM event when you toggle between another radio within the radio group even though it was just turned off.
- Since the old radio never receives an event the this.checked variable which Ext maintains becomes state at true. Therefore the next time it is clicked, both the dom and this.checked are already in agreement and no event will be fired.
Since we don't have an event for the old radio we need to find a way to retrieve the radio and set its checked state properly.
So I did following changes:
- Added onClick method for radio
- Find the current node which clicked
- Find the parent node of clicked node
- Check for the group id [As these where under the specific group]
- Iterate through each child node for the parent node.
- When the filterId is same as clicked filterId set checked to true else false
Clicked event
onClick: function(e, el) {
var t;
if (t = e.getTarget('input[type=radio]')) {
this.radioChange(e, this.node);
}
}
Radio Change Handling
radioChange: function(e, n) {
var currentNodeId = n.attributes.filterId;
var filter = n.parentNode;
// check the selected and uncheck others
if(filter.attributes.filterId === 'radiogroup') { // radiogroup is groupId
filter.eachChild(function(filterChild) {
if(filterChild.attributes.filterId==currentNodeId)
filterChild.attributes.checked = true;
else
filterChild.attributes.checked = false;
});
}
this.node.getOwnerTree().setDirty(); //
}
Other way :
http://extjs.com/forum/showthread.php?t=13247
http://extjs.com/forum/showthread.php?t=7194
