Extjs4 radiogroup in tabpanel, loads fine on first tab, but not others - extjs4

Question

I have a tabpanel with a grid in the first tab - called main-grid. I double-click on a row in main-grid and it loads a new tab, with a form-grid. In the form-grid I have set a column layout. I have a grid in the left column and a form with the radiogroup in the right column.
When a new tab opens, the grid from the form-grid loads fine, and when I select a record in the form-grid grid, it loads into the form fine and the radiogroup loads as well with my convert function. The values I am working with from the grid are "Yes" and "No", so I am converting them with my 'convert' function to an INT and then returning them.
Here is a snippet of my code:
Ext.define('ValueRadioGroup',({
extend: 'Ext.form.RadioGroup',
alias: 'widget.valueradiogroup',
fieldLabel: 'Value',
columns: 2,
defaults: {
name: 'rating' //Radio has the same name so the browser will make sure only one is checked at once
},
items: [{
inputValue: '2',
boxLabel: 'Yey'
}, {
inputValue: '1',
boxLabel: 'Nay'
}]
}));
Ext.define('TargetViewModel', {
extend: 'Ext.data.Model',
fields : [
{name: 'ID'},
{name: 'FAMILYNAME'},
{name: 'TABLENAME'},
{name: 'TARGETNAME'},
{name: 'TARGETLABEL'},
{name: 'TARGETVALUE'},
{name: 'ITEMREL'},
{name: 'ITEMREF'},
{name: 'ITEMNAME'},
{name: 'ITEMMNEMONIC'},
{name: 'ALLOWED'},
{name: 'rating', type: 'int', convert: convertTARGETVALUE}
]
});
... and here is where it is being called:
this.items = [{
// GRID
columnWidth: .65, // GRID width
xtype: 'ggtargetviewgrid',
store: this.store,
listeners: {
selectionchange: function(model, records) {
if (records[0]) {
var value = this.up('form').getForm().loadRecord(records[0]);
}
}
}
}
,
{
// FORM
columnWidth: 0.3, // FORM width
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Target Details',
defaults: {
width: 280,
labelWidth: 50
},
defaultType: 'textfield',
items: [
{
fieldLabel: 'Name',
name: 'ITEMNAME'
}, {
xtype: 'valueradiogroup'
}]
}]
This is my convert function:
var convertTARGETVALUE = function(value, record) {
var tval = record.get('TARGETVALUE'), val = 0;
if (tval === 'Yes') return val+2;
if (tval === 'No') return val+1;
return val;
};
The problem is that the radiogroup works fine for the FIRST form-grid opened, but NOT for the second, or ANY subsequent tabs opened.

Answer 1

I had the same problem and I solved it like this:
xtype:'radiogroup',
itemId:'storageType',
name:'entdata.storageType',//this give me the idea
items:[
{boxLabel:"s0",name:'entdata.storageType',inputValue:"0",checked:true},
{boxLabel:"s1",name:"entdata.storageType",inputValue:"1"},
{boxLabel:"s2",name:'entdata.storageType',inputValue:"2"},
{boxLabel:"s3",name:'entdata.storageType',inputValue:"3"} ]
setValue:function(value) {
if (!Ext.isObject(value)) {
var obj = new Object();
obj[this.name] = value;
value = obj;
}
Ext.form.RadioGroup.prototype.setValue.call(this, value);
}
Join name with setValue, then can work.