Sencha ExtJS: radiofields unselected - extjs

Question

Please consider two modal windows that refer to the common container with the group of radiofield in the below fiddle.
https://fiddle.sencha.com/#view/editor&fiddle/3e45
Initially, the first radio R1 is correctly checked in containers of both windows. However, checking any radiofield on one of the windows unselects all the radiofield items on another window.
Two windows contain independent instances of the container, so it's unclear how they can affect each other. This behavior is not happening with any other elements (e.g. checkboxes), only radios.
Any ideas are very much appreciated.

Answer 1

Put/wrap your radio fieldset in form panel, in this case it will keep the value (yourForm.getValues()):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('fsContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.fsContainerHandler'
});
Ext.define('fsContainer', {
extend: 'Ext.form.Panel', // ---== Extending form now. ==---
xtype: 'xFSContainer',
sfx: '',
controller: 'fsContainerHandler',
items: [{
xtype: 'fieldset',
title: 'myFieldset',
reference: 'fsRef',
flex: 1,
items: [{
xtype: 'radiofield',
checked: true,
name: 'myRadio',
boxLabel: 'R1'
}, {
xtype: 'radiofield',
checked: false,
name: 'myRadio',
boxLabel: 'R2'
}, {
xtype: 'radiofield',
checked: false,
name: 'myRadio',
boxLabel: 'R3'
}]
}]
});
Ext.define('mainContainerHandler', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainContainerHandler',
singleton: true,
onButton1Click: function () {
var win = this.getView().window1;
win.show();
},
onButton2Click: function () {
var win = this.getView().window2;
win.show();
}
});
Ext.define('mainContainer', {
extend: 'Ext.container.Container',
width: 400,
height: 400,
controller: 'mainContainerHandler',
window1: null,
window2: null,
initComponent: function () {
this.window1 = Ext.create('window1');
this.window2 = Ext.create('window2');
this.callParent(arguments);
},
items: [{
xtype: 'button',
text: 'Window 1',
reference: 'btn1',
handler: mainContainerHandler.onButton1Click,
scope: mainContainerHandler
}, {
xtype: 'button',
text: 'Window 2',
reference: 'btn2',
handler: mainContainerHandler.onButton2Click,
scope: mainContainerHandler
}]
});
Ext.define('window1', {
extend: 'Ext.window.Window',
title: 'Window1',
modal: true,
width: 400,
height: 400,
closeAction: 'hide',
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
reference: 'theContainer'
}]
});
Ext.define('window2', {
extend: 'Ext.window.Window',
title: 'Window2',
modal: true,
width: 400,
height: 400,
closeAction: 'hide',
referenceHolder: true,
items: [{
xtype: 'xFSContainer',
reference: 'theContainer'
}]
});
Ext.create('mainContainer', {
renderTo: document.body
});
}
});