PDA

View Full Version : Set a int value on a radiogroup fails



steffen.rahn
12 Mar 2012, 11:11 PM
Below is the code that worked fine in ExtJS 3.x but in ExtJS 4.0.7 the value can be fetched using form.getValues(); but in can't be set using form.loadRecord();
The first button logs the getValues result to the console, the second a record that was setted with the current form values and the third will try to set the second combo



Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'type', type: 'int' }
]
});
var win = Ext.create('Ext.window.Window', {
height: 300,
width: 300,
layout: 'fit',
items: {
xtype: 'form',
layout: 'anchor',
items: [
{
xtype: 'radiogroup',
columns: 1,
hideLabel: true,
name: 'type',
items: [
{
inputValue: '1',
boxLabel: 'type A',
name: 'type'
}, {
inputValue: '2',
boxLabel: 'type B',
name: 'type'
}
]
}
],
buttons: [
{
text: 'do',
handler: function (btn) {
var win = btn.up('window'),
form = win.down('form');
console.log(form.getValues());
}
},
{
text: 'do 2',
handler: function (btn) {
var win = btn.up('window'),
form = win.down('form'),
values = form.getValues(),
rec = Ext.create('User');
rec.set(values);
console.log(rec);
}
},
{
text: 'do 3',
handler: function (btn) {
var win = btn.up('window'),
form = win.down('form'),
rec = Ext.create('User', { type: 2 });
form.loadRecord(rec);
}
}
]
}});
win.show();

jsakalos
12 Mar 2012, 11:56 PM
For the reason unknown to me, setValue of RadioGroup expects object as argument. You can workaround it as follows:

<!DOCTYPE html>
<!-- radiogroup-loadrecord.html -->
<html>
<head>
<title>Example by Saki</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="ext-4.0.7/resources/css/ext-all.css" type="text/css">
<link rel="shortcut icon" type="image/png" href="../Icon.png">
<script type="text/javascript" src="ext-4.0.7/ext-all-dev.js"></script>
<script type="text/javascript">

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'type', type: 'int' }
]
});

// entry point
Ext.onReady(function() {
var win = Ext.create('Ext.window.Window', {
height: 300,
width: 300,
layout: 'fit',
items: {
xtype: 'form',
layout: 'anchor',
items: [
{
xtype: 'radiogroup',
columns: 1,
hideLabel: true,
name: 'type',
items: [
{
inputValue: '1',
boxLabel: 'type A',
name: 'type'
}, {
inputValue: '2',
boxLabel: 'type B',
name: 'type'
}
],
setValue:function(value) {
var val = Ext.isObject(value) ? value : {type:value};
console.log(this);
Ext.form.RadioGroup.prototype.setValue.call(this, val);
}
}
],
buttons: [
{
text: 'do',
handler: function (btn) {
var win = btn.up('window'),
form = win.down('form');
console.log(form.getValues());
}
},
{
text: 'do 2',
handler: function (btn) {
var win = btn.up('window'),
form = win.down('form'),
values = form.getValues(),
rec = Ext.create('User');
rec.set(values);
console.log(rec);
}
},
{
text: 'do 3',
handler: function (btn) {
var win = btn.up('window'),
form = win.down('form'),
rec = Ext.create('User', { type: 2 });
console.log(rec);
form.loadRecord(rec);
}
}
]
}});
win.show();

}); // eo onReady

</script>
</head>
<body>
</body>
</html>
<!-- eof -->

steffen.rahn
13 Mar 2012, 12:10 AM
Thanks for that quick reply... Yes this works and it should be classified as a bug if not already solved in the upcoming 4.1

I seems radiogroups has never been tested so far?!

jsakalos
13 Mar 2012, 12:13 AM
Well, it is more feature request I guess as radiogroup items do not necessarily have the same name so setValue is "more universal". However, it should provide also the simple variant in the case names are same.

Do you want me to move this thread to Bugs?

steffen.rahn
13 Mar 2012, 12:31 AM
I don't think so. As you said this is the simplest use case of a radio group while there is only one datatype from which you choose. Also the API example shows exactly this case...

So yes, please move this to bugs.

jsakalos
13 Mar 2012, 12:42 AM
I see. If docs say that it should work and it doesn't then it is definitely a bug.

Moved.

steffen.rahn
13 Mar 2012, 4:21 AM
I slightly modified the workaround:


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

steffen.rahn
19 Mar 2012, 10:45 PM
Still waiting for any feedback on this topic...

123lal
2 May 2013, 11:24 PM
Still waiting for any feedback on this topic...

Is there any improvement.

am working in Ext 4.0.7

i had given a dynamic store to radio group , the items are loads from the database, but in edit the value is not binding to the radiogroup .

Bob Davis
4 Aug 2013, 7:38 AM
I'm seeming to see the same problem... has this been fixed in 4.2.1 ?

tonvoon
27 Jun 2016, 6:37 AM
Hi,

As google seems to see this on searches, I thought I'd add my override so this fixes this issue permanently within our app:



// This overcomes a weird decision by ExtJS where a form with radiobuttons
// for form.getValues returns { radiofieldname: 1 }
// But when you setValues() for this, it doesn't work because the radio
// group expects an object, so it requires
// {radiogroupname: { radiofieldname: 1 } }
// This feels wrong
// This override will force the value to be set to an object so that the
// it works as expected. There is an assumption that
// the radio group has the same name as the radio buttons
Ext.define('MyApp.overrides.RadioGroup', {
override: 'Ext.form.RadioGroup',
setValue: function(value) {
if (!Ext.isObject(value) && !Ext.isEmpty(this.name)) {
var obj = {};
obj[this.name] = value;
value = obj;
}
return this.callParent([value]);
}
});