Dynamically Update Radio inputValue (EXT JS 4.2.1)

Question

I am creating a radiogroup and when it's created, I set the "inputValue" to set the value of the field. For the first radio button, inputValue is set to 'I' (for in) and 'O' (for out) is set for the second radio button.

If someone clicks the "OUT" radio, then a window pops up and asks them to choose a value from a combo box. The possible values there are 'F', 'R' or 'T' and if they select one of those, I'd like to modify the 'OUT' inputValue to reflect that. So when the form is submitted, it should, for example, send back 'F' instead of 'O'.

Here is the code for the radio buttons:

items: [
    {
        xtype: 'container',
        defaultType: 'radiofield',
        allowBlank: false,
        blankText: 'Required',
        hideLabel: true,
        layout: 'hbox',
        items: [
            {
                xtype: 'radiofield',
                boxLabel: 'IN',
                name: 'susceptible_populations_1',
                width: 50,
                padding: '2 0 0 10',
                checked: true,
                inputValue: 'I',
                id: 'susceptible_populations_1_in'
            },
            {
                xtype: 'radiofield',
                boxLabel: 'OUT',
                name: 'susceptible_populations_1',
                width: 115,
                padding: '2 0 0 10',
                inputValue: 'O',
                id: 'susceptible_populations_1_out',
                listeners: {
                    click: {
                        element: 'el',
                        fn: function() {
                            show_popup_window('susceptible_populations_1_out', '9A(5)');
                        }
                    }
                }
            }
        ]
    }
]

I have Googled around and found a couple of solutions, but none of them seem to work for me. All of them still return 'O' when I submit the form.

Here are some definitions for my popup window:

• FIELD_NAME is passed as the first parameter to the function. In this instance it is 'susceptible_populations_1_out'
• TRUNCATED_FIELD_NAME is the same as above, except the '_out' has been removed. In this instance, it is 'susceptible_populations_1'. This is the name of the field that actually gets returned with my form post.
• record is the value of the combo box. For this example, we can use the letter 'F'.

Here are some of the examples I am trying:

Ext.getCmp(FIELD_NAME).setValue(record);

This appears to set the value of the radio to true. The value should have already been set to true when I clicked on it, so this is redundant and doesn't change the inputValue to 'F'

Ext.get(FIELD_NAME).set({inputValue:record});

This appears to do nothing that I can tell. I'm guessing that it's because to set something, the set needs a current name AND value and just sets that instance to true when it makes a match. This is not what I'm attempting to do.

var temp = Ext.get(Ext.ComponentQuery.query('[name=' + TRUNCATED_FIELD_NAME + ']')).getValue().elements[1];
Ext.get(temp).set({value:record});

Here I am attempting to access the element directly and it doesn't seem to do anything either. I've tried many different combinations of the preceeding code snippets also, (including replacing FIELD_NAME with TRUNCATED_FIELD_NAME in the above examples), but the value of the radio always comes back as 'O'.

In Sencha Touch, there seems to be a setGroupValue, but I couldn't find that in the EXT JS 4 docs anywhere. (Although getGroupValue works as expected.)

Can someone please give me some guidance on this?

Thanks so much!

Answer 1

you can set the config property later at any time

Ext.getCmp(FIELD_NAME).inputValue = 'F'

only notice that getCmp with static ids should not be used, instead use ComponentQuery and itemId.