how to make dynamic forms - extjs

Question

i want to save data (result) but three fields with the same name. when one is enabled others are disabled. it works for me. but the problem is that when i edit it from grid, two ,, added with values......... [in extjs 4 mvc]
here is my view
Ext.define('Ext4Example.view.employee.Education' ,{
extend: 'Ext.window.Window',
alias : 'widget.education',
modal:true,
autoShow: true,
bodyPadding: 5,
initComponent: function () {
this.items = [
{
xtype: 'form',
id:'form',
bodyStyle: {
background: 'none',
padding: '10px',
border: '0'
},
items: [
{
xtype: 'fieldcontainer',
items: [
{
xtype: 'combobox',
fieldLabel: 'Result Type',
emptyText:'Select Result Type',
displayField:'type',
valueField:'id',
store: 'TypeStocks',
name: 'type',
id:'type',
width: 265,
allowBlank:false,
anchor:'95%',
listeners : {
'select': {
fn: function (combo, value) {
var value=combo.getValue();
if(value =='1'){
Ext.getCmp('cgpa').hide();
Ext.getCmp('jak').hide();
Ext.getCmp('sc').hide();
Ext.getCmp('range').hide();
Ext.getCmp('range').disable();
Ext.getCmp('cgpa').disable();
Ext.getCmp('division').enable();
Ext.getCmp('division').show();
}
else if(value =='2'){
Ext.getCmp('division').disable();
Ext.getCmp('division').hide();
Ext.getCmp('cgpa').enable();
Ext.getCmp('cgpa').show();
Ext.getCmp('jak').show();
Ext.getCmp('sc').show();
Ext.getCmp('range').enable();
Ext.getCmp('range').show();
}
}
}
}
},
{
xtype:'combobox',
fieldLabel: 'Division',
name: 'result',
emptyText:'Select Result',
store: Division,
id:'division',
width: 265,
anchor:'95%',
allowBlank:false
},
{
xtype:'fieldcontainer',
layout: 'hbox',
items:[
{
xtype:'label',
text:'Score',
hidden: true,
id:'sc'
},
{
xtype:'textfield',
name: 'result',
hidden: true,
width: 68,
margin:'0 0 0 75',
id:'cgpa',
anchor:'95%',
emptyText:'Score',
vtype : 'radius',
allowBlank:false
},
{
xtype:'textfield',
name: 'result',
hidden: true,
width: 68,
margin:'0 0 0 75',
id:'gpa',
anchor:'95%',
emptyText:'Score',
vtype : 'radiuss',
allowBlank:false
},
{
xtype:'label',
text:'of',
hidden: true,
margin:'0 5 0 5',
id:'jak'
},
{
xtype: 'combobox',
emptyText:'Range',
store: range,
name: 'range',
id: 'range',
margin:'0 5 0 5',
width: 65,
hidden: true,
anchor:'95%',
allowBlank:false,
listeners : {
'select': {
fn: function (combo, value) {
var value=combo.getValue();
if(value =='5.00'){
Ext.getCmp('outOf').setValue(1);
Ext.getCmp('cgpa').enable();
Ext.getCmp('cgpa').show();
Ext.getCmp('gpa').setValue('');
Ext.getCmp('gpa').disable();
Ext.getCmp('gpa').hide();
}
else if(value =='4.00'){
Ext.getCmp('outOf').setValue(0);
Ext.getCmp('gpa').enable();
Ext.getCmp('gpa').show();
Ext.getCmp('cgpa').setValue('');
Ext.getCmp('cgpa').disable();
Ext.getCmp('cgpa').hide();
}
}
}
}
}]
},
{
xtype: 'button',
text: 'SAVE',
iconCls: 'savee',
handler: function () {
var form = this.up('form').getForm(),
values = form.getValues();
var education = Ext.create('Ext4Example.model.EducationModel',values);
// if (form.isValid()) {
education.save({
success: function(education) {
var store = Ext.data.StoreManager.get('EducationStocks');
store = !store ? Ext.create("EducationStocks") : store;
store.load();
},
failure: function(education){
Ext.Msg.alert('Failed', 'Data already exits');
}
});
// }
}
},
{
xtype: 'button',
text: 'Cancel',
margin:'0 0 0 5',
scope: this,
handler: this.close
}]
}]
}];
this.callParent(arguments);
}
});
---------------
model
Ext.define('Ext4Example.model.EducationModel', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'result', mapping:'result', type: 'string'} ,
{name: 'outOf', mapping:'outOf', type: 'int'}
],
proxy: {
type: 'ajax',
noCache: false,
api: {
create : '${createLink(controller:'education', action: 'create')}'
},
actionMethods: {
create : 'POST'
},
reader: {
type: 'json',
root: 'data',
totalProperty : 'total',
successProperty : 'success',
messageProperty : 'message',
implicitIncludes: true
},
writer: {
type: 'json',
root: 'data',
writeAllFields: true
},
simpleSortMode: true
},
belongsTo: [{model:'Ext4Example.model.ExamModel', name:'exams'}]
});

Answer 1

If two of more fields have the same name, when the form is submitted, the fields with the same name are clubbed together into an array and then submitted. So, if you check the parameter submitted to the server, they will be :
type : typeValue
result : [resultFromCombo, resultFromTextField1, resultFromTextField2]
range : rangeValue
So in the server, I think you are directly converting the result array into a string and saving it. On converting the result array to a string it will convert to resultFromCombo, resultFromTextField1, resultFromTextField2. Hence you are getting the 2 commas in your grid.