Ext RadioGroup - How to Access the value of selected radio button?

Question

I am having some difficulty accessing the value of the selected radio button in a radiogroup. I've attempted a number of different approaches based upon discussion in other posts on the forum and around the web. Unfortunately haven't been lucky (or skilled) enough to get it working. Based on the following FormPanel config I was hoping someone could show me how to get the value of the selected radio in the group 'mainPhone'.

Thanks!

Wanted to update to indicate that I was able to get a response from stackoverflow while the EXT-JS forums didn't provide me with any help. Way to go stackoverflow!

Matt

function createForm(elem) {
var myForm2 = new Ext.form.FormPanel({
  renderTo:elem,
  width:425,
  frame:true,
  style:"margin: 10px auto 10px auto;",
  items: [{xtype:'fieldset',
            title: 'Contact Info',
            autoHeight:true,
            items :[new Ext.form.RadioGroup({
                        fieldLabel: 'Main Phone',
                        vertical: false,
                        id:"mainPhone",
                        items: [
                            {boxLabel: 'Home', name: 'id-1', inputValue: 'H', checked:true},
                            {boxLabel: 'Work', name: 'id-1', inputValue: 'W'},
                            {boxLabel: 'Other', name: 'id-1', inputValue: 'O'}
                        ]    

                    }),
                  new Ext.form.TextField({
                    id:"frm_CreateCustomerHomePhone",
                    fieldLabel:"Home Phone",
                    width:275,
                    allowBlank:true
                 }),
                 new Ext.form.TextField({
                    id:"frm_CreateCustomerWorkPhone",
                    fieldLabel:"Work Phone",
                    width:275,
                    allowBlank:true
                 })
                  new Ext.form.TextField({
                    id:"frm_CreateCustomerOtherPhone",
                    fieldLabel:"Other Phone",
                    width:275,
                    allowBlank:true
                 })
    ]}]});              
}

Answer 1

This is something of a wild guess, but how about this:

myForm2.getForm().getValues()['id-1'];

Answer 2

The method getValue() on the radio group itself will return the object that is checked, if any, otherwise, it returns undefined.

(by the way I set value instead of inputValue for my boxes, although I don't think it makes much of a difference, maybe it does on the last "getValue"), I'm using extjs 3.0, and my radiogroup configuration is slightly different than yours.

var checkedItem = Ext.getCmp('mainPhone').getValue();

if (checkedItem == undefined) return '';

return checkedItem.getGroupValue();
// The getGroupValue will return the value of the checked option in a group,
// unfortunately, it only seems to work on the items and not the radiogroup 
// itself

Answer 3

I know this question is old, but I'm adding this for reference. The following snipit is valid for Ext 2.2 afaik.

Ext.getCmp("mainPhone").items.get(0).getGroupValue();

Answer 4

The answer from Lo-Tan works for me. I am also using extjs 2.2.1 Like me you may not have a ext.Form.Formpanel but just a searchbox and a radiogroup. I use this code to get the value from the radio group.

My radio group:

var begrens_sok = new Ext.form.RadioGroup({  
fieldLabel: 'Begrens søket',  
columns: 1,
name: 'sokspecs',
id:'sokspecs',
 items: [  
      {boxLabel: 'Scientific name', name: 'sokspec', inputVale:'SN'},
      {boxLabel: 'Norsk navngruppe', name: 'sokspec', inputValue:'NNG'},
      {boxLabel: 'Norsk navnart', name: 'sokspec', inputValue:'NNA'},
      {boxLabel: 'Prosjektsøk', name: 'sokspec', inputValue:'PROJ'},
      {boxLabel: 'Fritekst søk', name: 'sokspec', inputValue:'FSOK', 'id':'sokspec', checked: true}
 ]  
    });

To get the checked radiobutton value I use this:

var radiovalue=  Ext.getCmp('sokspecs').items.get(0).getGroupValue()

Answer 5

if you want to get the specific value of the field, use

myForm2.getForm().findField('id-1').getGroupValue();

Answer 6

Not sure if this is too simple but I was able to access the value (in Ext 3.3.1) using the 'inputValue' property.

var radio = ...;
var value = radio.inputValue;

Answer 7

if you are using MVC, probably you try to ignore using ids. so one of the solution then to get value in change event is

change : function(radioButton, newValue, oldValue, eOpts){
        console.log(newValue.individual);
}

Answer 8

function get_radio_value()
{
    for( var i=0; i < document.myForm.mainPhone.length; i++ )
    {
       if( document.myForm.mainPhone[ i ].checked )
       {
           return document.myForm.mainPhone[ i ].value;
       }
    }
}