CODEWITHSUNDEEP
extjsonclickradio-button
Microsoft DN
Microsoft DN

Reputation: 10030

ExtJS 2.3. 0 radio click event is firing twice

I am using Extjs 2.3.0

I have a radio control and in my requirement, I wanted to add a functionality where I can uncheck the radiobutton. (Usually we do not uncheck a radio) and I solved it as follows

 { boxLabel: 'Yes', name: 'Yes', inputValue: 'Yes', xtype: 'radio',
   onClick: function (e) {
         if (this.checked) {                                        
              this.setValue(false);
         } else {
              this.setValue(true);
         }
   }
 }

This is working fine

Now, my problem is, above code works fine if I click on radiobutton, but the click event fires twice if I click on Radiobutton label. That is the boxlabel 'Yes'.

As the event fires twice and the radio is not able to check.

I dont understand why the event fires twice on label click and not on the radio click. Can anyone have any solution or workaround?

Upvotes: 1

Views: 679

Answers (1)

matt
matt

Reputation: 4047

Uhm, uncheckable radio boxes, sounds weird :)

Anyway, you are overriding the radio's onClick method (inherited from Ext.form.CheckBox) in your configuration, which looks like:

// private
onClick : function(e){
    if (!this.disabled && !this.readOnly) {
        this.toggleValue();
    }
    e.stopEvent();
},

So, you need to stop the event propagation as it is done in the original function. Also, I'd suggest using the toggleValue function as well, as this ensures that other radios with the name name will be unchecked correctly:

onClick: function(e) {
    if (!this.disabled && !this.readOnly) {
        if (!this.checked) {
            this.toggleValue();
        } else {
            this.setValue(false);
        }
    }
    e.stopEvent();
},

Btw, the best way is probably to create a new class which extends Ext.form.RadioBox. Check out this fiddle.

Upvotes: 1

Related Questions