(extjs) Get selected value of radio button in form. Not returning the value

Question

I've followed the basic procedures for obtaining the selected value of my radio button form.

        ....
        xtype: 'radiofield',
        name: 'timespan',
        id: 'timespan',
        value: 7,
        checked: true,
        fieldLabel: 'Time Span',
        boxLabel: '7 days'
    }, {
        xtype: 'radiofield',
        name: 'timespan',
        value: '30',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: '30 days'
    }, {
        xtype: 'radiofield',
        name: 'timespan',
        value: '60',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: '60 days'
    }, {
        xtype: 'radiofield',
        name: 'timespan',
        value: 'all',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: 'All' ....

I've used methods like:

Ext.getCmp('filter_form').getForm().getValues()['timespan']

But when I run this to the console, instead of getting the value of the selected button, I get the word on. What gives?! I've tried several different combos of getValues, getForm, etc, but I always end up with on or true or false. What's going on here?

Solution 1

Figured it out! Turns out that my extjs sample code has an error!

I changed value to inputValue. Taken from the Sencha Docs, inputValue is:

The value that should go into the generated input element's value attribute and should be used as the parameter value when submitting as part of a form. Defaults to: 'on'

Aha!! Because I hadn't specified a "real" value, it defaulted to on.

Be careful when using the extjs examples/sample code!

Solution 2

try setting inputValue property of radio. Which is the value that should go into the generated input element's value attribute and should be used as the parameter value when submitting as part of a form.

{
        xtype          : 'radiofield',
        name           : 'timespan',
        inputValue     : '30',
        hideEmptyLabel : false,
        boxLabel       : '30 days'
}

then it can be accessed as

Ext.ComponentQuery.query('[name=timespan]')[0].getGroupValue();

refer docs getGroupValue