title: how to make dynamic forms
body: <p>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]</p>
  
  <h2>here is my view</h2>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>});</p>
  
  <pre><code>          ---------------
  </code></pre>
  
  <h2>model</h2>
  
  <pre><code>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'}]
  </code></pre>
  
  <p>});</p>