Extjs reloading radiogroup with updated radio items array

Question

I have an Ext.Window that contains a formPanel. The formPanel has a radiogroup item which loads a radioItemsArray. Initially I create each radioItem based on data from myRadioStore and is mapped to the radiogroup in formpanel. This works fine, see code below:

this.radioItemsArr = [];
    Ext.each(myRadioStore.data.items, function(itm, i, all) {
        var radioItem = new Ext.form.Radio({
                    id : itm.data.dataId,
                    // custom radio label with text + images
                    boxLabel: 
                        '<b>Data id:</b> ' +  itm.data.dataId + '<br/>' +
                        '<b>Data:</b> ' +  itm.data.dataDetail + '<br/>' +
                        '<p>' + '<img id style="imgStyle" src=\"' + itm.data.url + '\"/></p>',                          
                    name: 'radioName',
                    inputValue: itm.data.dataId ,
                    height: 'auto',
                    checked: false
                });
        this.radioItemsArr.push(radioItem);
    }, this);

this.myForm = new Ext.form.FormPanel({
            border: false,
            id:'my-form',
            frame : true,
            layout : 'fit',
            items: [{
                    autoScroll: true,
                    id: 'myFormId',
                    defaults: {
                        labelStyle: 'font-weight:bold;'
                    },
                    items: [{
                        title: 'Custom Title',
                        items: [{
                            // custom description text set on form load
                            id: 'descId',
                            style : { marginTop: '15px', border:'5px'}
                        }]
                    }, {
                        title: 'Select an item from below',
                        items: [{
                            anchor: '0',
                            autoHeight: true,
                            xtype: 'radiogroup',
                            hideLabels: true,
                            id: 'allRadiosID',
                            items: [
                                this.radioItemsArr
                            ],
                        }]
                    }
                ],
            }],
            buttonAlign :'center',
            buttons: [{
                // save button
            },{
                // cancel button
            }]
        });

This loads all the radio buttons correctly the first time. But when myRadioStore is updated with new data from server (it happens when user clicks a button), I want my form panel to update with the new radio buttons. So when myRadioStore is updated, I remove all items in radioItemsArray and then creates new radioItem by looping through the store and pushing to radioItemsArr. I can see that the radioItemsArr has new radio button options. But the radiogroup in formpanel is not getting refreshed.

Calling Ext.getCmp('my-form').doLayout() don't seem to work. Any thought/comments?

Edit: I'm using extjs 3.4

Thanks!

Answer 1

Calling layout/render on form did not work in case of radioGroup. So every time myRadioStore is updated, you need to remove the radiogroup from the form, create a radio array from myRadioStore and then re-add the radiogroup array back in the form.

Something like:

Ext.getCmp('my-form').remove(Ext.getCmp('allRadiosID'), true);
// recreate `radioItemsArr[]` array of radios from updated `radioItemsArr` and add it back to form
Ext.getCmp('my-form').add(new Ext.form.RadioGroup({
                                anchor: '0',
                                autoHeight: true,
                                id: 'allRadiosID',
                                items: [
                                    radioItemsArr
                                ]
                            });