[1.1.1/2.0][Closed]Ext.form.Radio check event only fires once

[brian.moeskau]

vtswingkid, thanks for pointing that out. In fact, I've also made the same adjustment to the getGroupValue method as well. Here are the updated methods:

    getGroupValue : function(){
    	var p = this.el.up('form') || Ext.getBody();
        return p.child('input[name='+this.el.dom.name+']:checked', true).value;
    },
    
    // private
    onClick : function(){
    	if(this.el.dom.checked != this.checked){
    		var p = this.el.up('form') || Ext.getBody();
			var els = p.select('input[name='+this.el.dom.name+']');
			els.each(function(el){
				if(el.dom.id == this.id){
					this.setValue(true);
				}else{
					Ext.getCmp(el.dom.id).setValue(false);
				}
			}, this);
		}
    }

I've committed this fix to SVN for both 1.1 and 2.0 (1.1 uses Ext.get(document.body) instead of Ext.getBody()).

BTW, the RadioGroup ux looks pretty good so far. We'll probably consider doing something similar in a future release, but for now that should work great for people.

[3Devil]

Is it possible to mod this override so only the new (just clicked) and the old (last selected) radio groups events to be triggered? Or adding event that will be triggered when the previously selected element of the radio group is unselected?

It would be of great help.

[datanomisch]

Since I am submitting hashes to the server my form elements are name like hashname[key]. The proposed solution produces an exception since the CSS selector than reads: input[name=hashname[key]] which cannot be parsed.

Does anyone know how to escape that stuff I tried name.replace(/\[/g,'\\[') and variants therof but they don't seem to work.

[dotnetCarpenter]

Since I am submitting hashes to the server my form elements are name like hashname[key]. The proposed solution produces an exception since the CSS selector than reads: input[name=hashname[key]] which cannot be parsed.

Does anyone know how to escape that stuff I tried name.replace(/\[/g,'\\[') and variants therof but they don't seem to work.

I'm confused - where do you want to escape element names? On the client, in transport (i.e. JSON) or where?

[christocracy]

he wants to create a Radio with name "foo[bar]" and so do I. he's correct that it does raise an exception.

var radio = new Ext.form.Radio({name: 'company[billing_method]'});

[liberte]

    getGroupValue : function(){
        var p = this.el.up('form') || Ext.getBody();
        return p.child('input[name='+this.el.dom.name+']:checked', true).value;
    },
 
    // private
    onClick : function(){
        if(this.el.dom.checked != this.checked){
            var p = this.el.up('form') || Ext.getBody();
            var els = p.select('input[name='+this.el.dom.name+']');
            els.each(function(el){
                if(el.dom.id == this.id){
                    this.setValue(true);
                }else{
                    Ext.getCmp(el.dom.id).setValue(false);
                }
            }, this);
        }
    }

I've committed this fix to SVN for both 1.1 and 2.0 (1.1 uses Ext.get(document.body) instead of Ext.getBody()).

I am using this code in 2.0.1, and I experienced a difficult problem as a side effect. In a dialog window, I was populating a radio group by calling setValue on the selected radio button, and I assumed that the other radio buttons with the same name would have their values set to false. That was my error.

But what made this difficult to find was the fact that clicking on a radio button would propagate changes to the values of other radio buttons and compoents, but only if the value of the radio button clicked on was different from the value of the component. Consequently, by initially setting the value of only the selected radio button, this prevented the 'check' event from being triggered on other radio buttons whose components happened to have a true value.

The easy workaround is to set all of the radio buttons individually. I see in the latest version (2.0.2?) that we can also set the value of any radio to the string name used in the inputValue of the selected radio in the group. That will be more convenient, but it is still not clear from the docs whether all the other radio buttons will be set to false.

setValue( value {String/Boolean} ) : void
Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio of the same name whose value is the value specified.

It would be most convenient and least surprising if the Radio component acted like HTML radio buttons, by enforcing the group constraint that only a single radio button in a group is checked.

[caam]

It's great, I just copy and past your fix before Ext.onReady function and it's work.

Ext.override(Ext.form.Radio, {
    onClick : function(){
        if(this.el.dom.checked != this.checked){
            var els = this.el.up('form').select('input[name='+this.el.dom.name+']');
            els.each(function(el){
                if(el.dom.id == this.id){
                    this.setValue(true);
                }else{
                    Ext.getCmp(el.dom.id).setValue(false);                
                }
            }, this);
        }
    }
}); 

Thanks a lot. I use extjs1.1

[Mads281]

This is a problem in 3.3.1

I've resolved by applying Brians override to onClick in Checkbox (Radio extends from this)

                /**
    *    needed to ensure that oncheck event fires more than once
    */
    Ext.override(Ext.form.Checkbox, {
        onClick : function(){            
            if(this.el.dom.checked != this.checked){
                var p = this.el.up('form') || Ext.getBody();
                var els = p.select('input[name='+this.el.dom.name+']');
                els.each(function(el){
                    if(el.dom.id == this.id){
                        this.setValue(true);
                    }else{
                        Ext.getCmp(el.dom.id).setValue(false);
                    }
                }, this);
            }
        }
    });

[tryanDLS]

Please create a new bug thread in the correct forum. Nobody is going to look at it here.