Passing grid panel data via request payload to REST controller - rest

Question

I have a user form that is created in extjs framework. The user form has many user fields which are being passed as part of request payload to the REST controller.
I am trying to add a grid panel(most likely in a tabular format with multiple rows & columns) to the user form.
But I am not sure how to pass the grid panel data as part of request payload to the REST controller.
I will post more code if any more details are needed.
Any help would be appreciated. Thanks.
Ext.define('soylentgreen.view.admin.UserForm', {
extend : 'Ext.form.Panel',
alias : 'widget.userform',
bodyStyle : 'padding:5px 5px 0',
// some userform elements like firstname,lastname, go here.....
name : 'userTeamGrid',
xtype : 'gridpanel',
id : 'userTeamGrid',
itemId : 'userTeamGrid',
multiSelect : true,
selModel : Ext.create(
'Ext.selection.CheckboxModel',
{
injectCheckbox : 'first',
mode : 'MULTI',
checkOnly : false
}),
anchor : '100%',
width : '700px',
height : 250,
flex : 1,
store : 'userTeamStore',
var user = form.getRecord();
form.updateRecord(user);
user.save({
callback : function(records, operation){
//reset the (static) proxy extraParams object
user.getProxy().extraParams = {
requestType: 'standard'
}
if(!operation.wasSuccessful()){
var error = operation.getError();

Answer 1

IMO, That's one of the most complicated yet common issues we face in ExtJS. It has to be solved often, but most solutions have to be slightly different depending on the exact requirements.
Grids are bound to a full store, not to a single record. So if you want to get data from a record (e.g. as an array) into a grid and vice versa, you have to have a mapping between the data from the store and the value in a single field of a record. To e.g. get all data from the store, the generic solution is
store.getRange().map(function(record) { return record.getData(); });
If you need only the grid selection (maybe you want to use a checkboxselection model or similar) and/or only certain fields of the records, you have to change this code to your needs, e.g.
grid.getSelectionModel().getSelection().map(function(record) {return record.get('Id'); });
So, your record is bound to the form, and a form consists of fields. How do you get the grid data to be accepted as part of the form?
You have to add a hiddenfield to your form and, depending on your requirement, overwrite some of the four functions setValue, getValue, getModelData, getSubmitValue. Usually, the hiddenfield tries to convert its value to a string, but obviously, you need to allow for arrays there; and you want to modify the grid whenever setValue is called, or read the value from the grid whenever one of the getters is called. The four functions are used for the following:
setValue should be used to modify the grid based on the value you find in the record.
getValue is used in comparison operations (check whether the value has changed, which means the form is dirty and has to be submitted, etc.) and if you call form.getValues. You should return some value based on the grid state in it.
getModelData is used by the form.updateRecord method; it should return a value that the model field's convert method can work with.
getSubmitValue is used by the form.submit method, it should return a value that can be safely transmitted to the server (has to be a string if the form doesn't have sendAsJson:true set)
I cannot give you an exact recipe for these implementations, as they are specific to your requirements.