Geek Answers Handbook

How to make dynamic forms

I want to save data (result), but three fields with the same name. when one is on, the other is off. it works for me. but the problem is that when I edit it from the grid, two added with values ​​......... [in extjs 4 mvc]

here is my look

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'}]

});

+4
source share
1 answer

If the other two fields have the same name when the form is submitted, the fields with the same name are grouped into an array and then submitted. So, if you check the parameter presented on the server, they will be:

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

So, on the server, I think you directly convert the array of results to a string and save it. When converting an array of results to a string, it is converted to resultFromCombo, resultFromTextField1, resultFromTextField2 . Therefore, you get two commas in your grid.

+2
source

More articles:


All Articles