Sencha/ExtJs: Encode/Decode an array in the client/server communications

Hi,

I would expose you a simple solution to encode an array of objects during the submission of a form on client side (in Javascript) and decode this same array on server side (in JAVA).

Client side
During the submission of a form, we create a parameter named MyArrayParam which will contain the array of objects:

{
	xtype: 'container',
	height: 30,
	items: [
		{
			id: 'saveButtonID',
			margin: '0 0 0 20',
			xtype: 'button',
			iconCls: 'save-icon',
			text: 'Save',
			handler: function() {
				var form = this.up('form').getForm();
				if(form.isValid()==false){
					// Hide the waiting message box
					Ext.MessageBox.hide();
					//Ext.MessageBox.close();
					Ext.MessageBox.alert('Alert','Some fields are invalid');

				}else{						
					form.submit({
						url: 'mySpringMVCController.do?action=handleUpdate',
						method: 'POST',
						params: {
							MyArrayParam: getArrayParam()
						},
						waitTitle: 'Please wait',
						waitMsg: 'Sending and processing the data...',
						success: function(form, action) {
							// ...
						}
						,invalid: function(form, action){
							// ...
						}
						,failure: function(form, action) {
							// ...
						}
					}); // End of form.submit(...)
				}//end-if-else
			}//end of handler
		}
	]
}

We need a method to create the parameter MyArrayParam (for example by ranging the records in a store):

function getArrayParam(){
	var storeValues=[];
	var allRecords = Ext.getCmp('myGridPanelID').getStore().getRange();
	for (i=0;i < allRecords.length;i++){
		var rec = allRecords[i];
		storeValues[i] = rec.data;
	}
	var myArrayParam = new MyArrayParam();
	myArrayParam.arrayItems = storeValues;
	return Ext.encode(myArrayParam);
} 


MyArrayParam = function() {
	var arrayItems;
}

Server side
First, we will create a class AnArrayItem for the mapping the fields of an record in store (ExtJs) :

myArrayParam.arrayItems = storeValues;

…

/**
 * This class bind with Extjs from fields.
 */
public class AnArrayItem {

    // Fields
    private String id = null;
    private String type = null;
    private String reference = null;
    
    // ...
}

…then, the command class MyParameterCommand containing the array of above class AnArrayItem named arrayItems:

/**
 * This class bind with Extjs from fields.
 */
public class MyParameterCommand {
	
    // Classic fields
    private String globalId = null;
    private String globalType = null;

    // Array field  
    private AnArrayItem[] arrayItems;

Important note: The name arrayItems of array field in JAVA side

private AnArrayItem[] arrayItems;

 MyArrayParam = function() { var arrayItems; }

must be equal.


…finally, in the MVC controller, we retrieve the datas from the request and inject they in the JAVA bean MyParameterCommand:

Dans le controller Spring pour récupérer les données et les mettre dans un bean Java :

//...
public ModelAndView handleUpdate(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, InterruptedException {

	// Get the classic parameters
	MyParameterCommand parameters = new MyParameterCommand();
	ServletRequestDataBinder binder = new ServletRequestDataBinder(parameters);
	binder.bind(request);
	

	// Retrieval of the datas and injection of they in a JAVA bean:
	String myArrayParams = request.getParameter("MyArrayParam");
	if(myArrayParams!=null){
		JSONObject jsonObject = JSONObject.fromObject(myArrayParams);
 
		MyParameterCommand parametersTmp = (MyParameterCommand) JSONObject.toBean(jsonObject, MyParameterCommand.class);

		parameters.setArrayItems(parametersTmp.getArrayItems()); // simple setter/getter
	}
	// ...
}
//...

That’s all!!!!

Huseyin OZVEREN