Setting radiogroup values from JSON

[martinrame]

Hi, I have this form created in Designer:


Ext.define('MyApp.view.ui.CustomerProperties', {
extend: 'Ext.window.Window',


autoRender: false,
height: 288,
width: 421,
layout: {
type: 'fit'
},
title: 'Customer properties',
modal: true,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
ui: 'footer',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
id: 'btnOk',
text: 'Ok'
},
{
xtype: 'button',
id: 'btnCancel',
text: 'Cancel'
}
]
}
],
items: [
{
xtype: 'form',
frame: true,
id: 'customerproperties',
bodyPadding: 10,
frameHeader: false,
preventHeader: true,
items: [
{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'Id'
},
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
anchor: '100%'
},
{
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email',
anchor: '100%'
},
{
xtype: 'numberfield',
name: 'age',
fieldLabel: 'Age',
anchor: '100%'
},
{
xtype: 'checkboxfield',
id: 'active',
name: 'active',
fieldLabel: 'Active',
boxLabel: 'Customer is active',
checked: true,
anchor: '100%'
},
{
xtype: 'radiogroup',
height: 53,
id: 'gender',
layout: {
align: 'stretch',
type: 'vbox'
},
fieldLabel: 'Gender',
allowBlank: false,
columns: 1,
items: [
{
xtype: 'radiofield',
name: 'gender',
value: 'M',
boxLabel: 'Male',
checked: true
},
{
xtype: 'radiofield',
name: 'gender',
value: 'F',
boxLabel: 'Female'
}
]
}
]
}
]
});
me.callParent(arguments);
}
});


To populate form fields, I load a Store using this JSON, then pass a record of it to form's loadRecord:


{
"root": [
{"id": 1, "name": "Robinson, John", "email": "jrobinson@gmail.com", "age":45,"active":true,"gender":"M"},
{"id": 2, "name": "Gonzales, María", "email": "maria.gonzales@aol.com", "age":34,"active":true,"gender":"F"},
{"id": 3, "name": "Smith, Peter", "email": "peter@smithcompany.com", "age":60,"active":false,"gender":"M"}
]
}


But I'm getting this error:


Uncaught TypeError: Cannot use 'in' operator to search for 'gender' in F

I want to set the form's radiogroup named "gender" with the radio "Male" or "Female" checked depending on the value defined in my json.

How I must configure the JSON to do what I want?.

Thanks in advance.

[mitchellsimoens]

You should set inputValue on the radios

[martinrame]

Mitchell, I've set the inputValue of the 1nst radio to "M" and for the 2nd "F", as follows. But the result is the same. Any hint?


Ext.define('MyApp.view.ui.MyRadioGroup', {
extend: 'Ext.form.RadioGroup',


height: 53,
id: 'gender',
layout: {
align: 'stretch',
type: 'vbox'
},
fieldLabel: 'Gender',
allowBlank: false,
columns: 1,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'radiofield',
name: 'gender',
value: 'M',
boxLabel: 'Male',
checked: true,
inputValue: 'M'
},
{
xtype: 'radiofield',
name: 'gender',
value: 'F',
boxLabel: 'Female',
inputValue: 'F'
}
]
});


me.callParent(arguments);
}


});

[martinrame]

I found the solution:

1) My radiogroup had an id:"gender", just remove this, the id is not needed.
2) Define inputValue for each radio and name it "gender"
3) The json shoul be like this:


{
"root": [
{
"id": 1, "name": "Robinson, John", "email": "jrobinson@gmail.com",
"age":45, "active":true, "gender":0
},
{
"id": 2, "name": "Gonzales, María", "email": "maria.gonzales@aol.com",
"age":34,"active":true,"gender":1
},
{
"id": 3, "name": "Smith, Peter", "email": "peter@smithcompany.com",
"age":60,"active":false,"gender":0
}
]
}

[Jangla]

Sorry to resurect a bit of an old thread but I'm struggling with this in 4.1

My JSON is like this:




data : {
...
privacyPolicy : 1
...
}



...and my radio group is as follows:



...


xtype: 'radiogroup',
width: 400,
fieldLabel: "Privacy",
name: 'privacyPolicyGroup',
layout : 'hbox',
items: [{
fieldLabel : '',
boxLabel : 'Privacy Text',
name : 'privacyPolicy',
inputValue : 'privacyPolicy',
flex : 1


},{
fieldLabel : '',
boxLabel : 'Privacy URL',
name : 'privacyPolicy',
inputValue : 'privacyPolicy',
flex : 1
}]
},
...


Note also that my controls are on a tab panel but I've set deferredRender to false in case that helps.