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

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


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();
					// Hide the waiting message box
					Ext.MessageBox.alert('Alert','Some fields are invalid');

						url: '',
						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 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] =;
	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;

and in EXTJS side

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

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

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

That’s all!!!!


1 thought on “Sencha/ExtJs: Encode/Decode an array in the client/server communications”

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Related Post