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:

01{
02    xtype: 'container',
03    height: 30,
04    items: [
05        {
06            id: 'saveButtonID',
07            margin: '0 0 0 20',
08            xtype: 'button',
09            iconCls: 'save-icon',
10            text: 'Save',
11            handler: function() {
12                var form = this.up('form').getForm();
13                if(form.isValid()==false){
14                    // Hide the waiting message box
15                    Ext.MessageBox.hide();
16                    //Ext.MessageBox.close();
17                    Ext.MessageBox.alert('Alert','Some fields are invalid');
18 
19                }else{                      
20                    form.submit({
21                        url: 'mySpringMVCController.do?action=handleUpdate',
22                        method: 'POST',
23                        params: {
24                            MyArrayParam: getArrayParam()
25                        },
26                        waitTitle: 'Please wait',
27                        waitMsg: 'Sending and processing the data...',
28                        success: function(form, action) {
29                            // ...
30                        }
31                        ,invalid: function(form, action){
32                            // ...
33                        }
34                        ,failure: function(form, action) {
35                            // ...
36                        }
37                    }); // End of form.submit(...)
38                }//end-if-else
39            }//end of handler
40        }
41    ]
42}

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

01function getArrayParam(){
02    var storeValues=[];
03    var allRecords = Ext.getCmp('myGridPanelID').getStore().getRange();
04    for (i=0;i < allRecords.length;i++){
05        var rec = allRecords[i];
06        storeValues[i] = rec.data;
07    }
08    var myArrayParam = new MyArrayParam();
09    myArrayParam.arrayItems = storeValues;
10    return Ext.encode(myArrayParam);
11} 
12 
13 
14MyArrayParam = function() {
15    var arrayItems;
16}

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

`1`	`myArrayParam.arrayItems = storeValues;`

…

01/**
02 * This class bind with Extjs from fields.
03 */
04public class AnArrayItem {
05 
06    // Fields
07    private String id = null;
08    private String type = null;
09    private String reference = null;
10     
11    // ...
12}

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

01/**
02 * This class bind with Extjs from fields.
03 */
04public class MyParameterCommand {
05     
06    // Classic fields
07    private String globalId = null;
08    private String globalType = null;
09 
10    // Array field  
11    private AnArrayItem[] arrayItems;

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

`1`	`private` `AnArrayItem[] arrayItems;`

and in EXTJS side

`1`	`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 :

01//...
02public ModelAndView handleUpdate(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, InterruptedException {
03 
04    // Get the classic parameters
05    MyParameterCommand parameters = new MyParameterCommand();
06    ServletRequestDataBinder binder = new ServletRequestDataBinder(parameters);
07    binder.bind(request);
08     
09 
10    // Retrieval of the datas and injection of they in a JAVA bean:
11    String myArrayParams = request.getParameter("MyArrayParam");
12    if(myArrayParams!=null){
13        JSONObject jsonObject = JSONObject.fromObject(myArrayParams);
14  
15        MyParameterCommand parametersTmp = (MyParameterCommand) JSONObject.toBean(jsonObject, MyParameterCommand.class);
16 
17        parameters.setArrayItems(parametersTmp.getArrayItems()); // simple setter/getter
18    }
19    // ...
20}
21//...

That’s all!!!!

Huseyin OZVEREN

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

Related

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

Leave a Reply to prajakta Cancel reply

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

Share this:

Related

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

Leave a Reply to prajakta Cancel reply

Related Post

Documentum : BOF – SBO (Service based Business Object) – NoSuchMethodException – JAVA reflectionDocumentum : BOF – SBO (Service based Business Object) – NoSuchMethodException – JAVA reflection

Spring: Internationalization with message sourceSpring: Internationalization with message source

Microsoft Windows : Define a custom Uniform Resource Identifier (URI)Microsoft Windows : Define a custom Uniform Resource Identifier (URI)