how to make dynamic forms

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.