Ext JS 4: Reusing radiogroup class in Ext JS 4 - extjs

Question

I'm trying to reuse a radiogroup class that I've created, but I can't seem to get it working. Here's my code:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Test',
appFolder: 'app',
controllers: ['RadioController'],
launch: function() {
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'buttons',
items: [{
xtype: 'form',
items: [{
xtype: 'radiobuttons',
fieldLabel: 'group 1',
//name: '1',
defaults: {
name: 'button1'
}
}, {
xtype: 'radiobuttons',
fieldLabel: 'group 2',
//name: '2',
defaults: {
name: 'button2'
}
}]
}]
}]
});
}
});
RadioController.js
Ext.define('Test.controller.RadioController', {
extend: 'Ext.app.Controller',
models: [],
stores: [],
views: ['RadioButtons'],
init: function() {
}
});
RadioButtons.js
Ext.define('Test.view.RadioButtons', {
extend: 'Ext.form.RadioGroup',
alias: 'widget.radiobuttons',
items: [{
boxLabel: 'radio 1',
inputValue: 'radio 1'
}, {
boxLabel: 'radio 2',
inputValue: 'radio 2'
}]
});
What happens is, the page gets loaded, and everything looks right. However, when I click a radio button in 'group 1' and then click a radio button in 'group 2', I lose the clicked button in 'group 1'. I thought radio buttons worked off of the 'name' property, and if they had a different name property, they'd basically be in a different group... thus, I shouldn't lose group 1's clicked button. Basically, I'm trying to create this jsfiddle code by reusing a class I've made. Is this possible?
It's good to note that if I use the class's code in place of using the class, I can get my results, but this isn't good practice because that's what classes try to eliminate.

Answer 1

This works for me... thanks to bizcasfri on the Sencha forums.
RadioButtons.js
Ext.define('RadioButtons', {
extend : 'Ext.form.RadioGroup',
alias : 'widget.radiobuttons',
constructor: function (config) {
Ext.apply(this, {
defaults: {
xtype: 'radio',
name: config.name
},
items: [
{
boxLabel: 'Radio 1',
inputValue: '1'
},
{
boxLabel: 'Radio 2',
inputValue: '2'
}
]
});
this.callParent(arguments);
}
});
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Test',
appFolder: 'app',
launch: function() {
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'buttons',
items: [{
xtype: 'form',
items: [{
xtype: 'radiobuttons',
fieldLabel: 'group 1',
name: 'radiogroup1'
}, {
xtype: 'radiobuttons',
fieldLabel: 'group 2',
name: 'radiogroup2'
}]
}]
}]
});
}
});
Take note of the constructor method in the RadioButtons class... that's the trick to it all!