extjs - 如何制作动态表格

Question

我想保存数据(结果)但是三个同名的字段。当一个被启用时，其他人被禁用。这个对我有用。但问题是，当我从网格编辑它时，两个，添加了值....... [在 extjs 4 mvc]

这是我的观点

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

});

          ---------------

模型

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

如果两个以上的字段具有相同的名称，则在提交表单时，将具有相同名称的字段组合到一个数组中然后提交。因此，如果您检查提交给服务器的参数，它们将是:

type : typeValue
result : [resultFromCombo, resultFromTextField1, resultFromTextField2]
range : rangeValue

所以在服务器端，我觉得你是直接把结果数组转成字符串保存。将结果数组转换为字符串时，它将转换为 resultFromCombo, resultFromTextField1, resultFromTextField2 .因此，您将在网格中获得 2 个逗号。