Reusing radiogroup class.

[incutonez]

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 (http://jsfiddle.net/JbUk8/3/) 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.

[mitchellsimoens]

Your class:


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'
}
]
});

Each radio is separate for me, I can have both selected at the same time.

[incutonez]

And you sure? I'm using Ext JS 4.0.7, and it definitely doesn't work... is that what you used?

[incutonez]

Nope, doesn't work in 4.1.1 either. I also tried running this code in Firefox in 4.1.1, and it didn't work at all (it did work in IE 9), but in 4.0.7, it worked... something's up.



Ext.Loader.setConfig({
enabled: true
});

Ext.onReady(function() {
Ext.define('RadioButtons', {
extend: 'Ext.form.RadioGroup',
alias: 'widget.radiobuttons',
items: [{
boxLabel: 'radio 1',
inputValue: 'radio 1'
}, {
boxLabel: 'radio 2',
inputValue: 'radio 2'
}]
});
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'blah blah',
items: [{
xtype: 'form',
items: [{
xtype: 'radiobuttons',
fieldLabel: 'group 1',
//name: '1',
defaults: {
name: 'button1'
}
}, {
xtype: 'radiobuttons',
fieldLabel: 'group 2',
//name: '2',
defaults: {
name: 'button2'
}
}]
}]
}]
});
});


Not really sure what the problem is, but I still can't keep one radio button in each group selected...

[mitchellsimoens]

I used this code with 4.1.1 and 4.0.7 and both radios are selected independently from each other (screenshots provided)


Ext.define('RadioButtons', {
extend : 'Ext.form.RadioGroup',
alias : 'widget.radiobuttons',

items : [
{
boxLabel : 'radio 1',
inputValue : 'radio 1'
},
{
boxLabel : 'radio 2',
inputValue : 'radio 2'
}
]
});

Ext.application({
name : 'Test',

launch : function() {

new Ext.form.Panel({
renderTo : document.body,
width : 400,
height : 400,
title : 'Ext JS version: ' + Ext.versions.core.version,
items : [
{
xtype : 'radiobuttons'
}
]
});

}
});

4.1.1:
36918

4.0.7:
36919

[incutonez]

Oh no no no! You have to use my code! I'm trying to have two groups of radio buttons, so if I select one from one of the groups, it should stay selected if I select one from the other group... just like the JSFiddle code that I posted.

So using your code, something like this (bolded what I added).



Ext.define('RadioButtons', {
extend : 'Ext.form.RadioGroup',
alias : 'widget.radiobuttons',

items : [
{
boxLabel : 'radio 1',
inputValue : 'radio 1'
},
{
boxLabel : 'radio 2',
inputValue : 'radio 2'
}
]
});

Ext.application({
name : 'Test',

launch : function() {

new Ext.form.Panel({
renderTo : document.body,
width : 400,
height : 400,
title : 'Ext JS version: ' + Ext.versions.core.version,
items : [
{
xtype : 'radiobuttons',
fieldLabel: 'group1',
defaults: {
name: 'radiogroup1'
}
}, {
xtype : 'radiobuttons',
fieldLabel: 'group2',
defaults: {
name: 'radiogroup2'
}
}
]
});

}
});


I think the problem is the defaults parameter... it just isn't working with the name option.

[bizcasfri]

I ran into this issue as well and came up with the following. I use the passed config object in the widgets constructor and set the name of all radio buttons to it.

http://jsfiddle.net/joeyburgett/JbUk8/4/
(http://jsfiddle.net/joeyburgett/JbUk8/4/)

Ext.define('WidgetGroup', {
extend: 'Ext.form.RadioGroup',
alias: 'widget.widgetgroup',
fieldLabel: 'Reusable Radio Group',
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);
}
});

Ext.application({
name : 'Radio Group Widget',
launch : function() {
new Ext.form.Panel({
renderTo: document.body,
width: 400,
height: 400,
title: 'Ext JS version: ' + Ext.versions.core.version,
items: [{
xtype : 'widgetgroup',
name: 'groupsample'
},{
xtype: 'widgetgroup',
name: 'groupsample2'
}]
});

}
});
​

[incutonez]

Bravo. Nicely done. Thank you!

Also, if you have a StackOverflow account and post your answer here (http://stackoverflow.com/questions/11284278/reusing-radiogroup-class-in-ext-js-4), I'll gladly mark it as the answer and give you credit :)