how to send array of objects to server side in single request in extjs4?

Question

i am working in extjs4 MVC and I have been getting stuck at a point which is how to send object array in a single request. I know how to send single object to server.

1)Here is my some controller code :-

    check:function () {
    console.log("Inside check function.");
    //creating objects in javascript
    var obj = new Object();
    for (var i = 0; i < 4; i++) {
        var inputs = document.getElementsByName(i);
        var radio = "";
        for (var j = 0; j < inputs.length; j++) {
            if (inputs[j].checked) {
                name = inputs[j].name;
                value = inputs[j].value;
                //obj[i].name1=name;
                obj[i] = {'questionId': name, 'option': value};
                console.log("questionId=" + name + " value=" + value);
                console.log("object name=" + obj[i].questionId + " Object value=" + obj[i].option);

                var check = Ext.ModelManager.create(
                    {
                        questionId: name,
                        option: value,
                    }, 'Balaee.model.qb.QbquestionoptionModel');
                console.log("User Infooooooooo:" + check.get('option'));
            }// End of if statment
        }// End of inner for loop
    }//End of outer for loop
    var storeObject = this.getStore('qb.QbquestionoptionStore');
    storeObject.sync();
    console.log("data send");

}// End of check function

2)Model class :---

Ext.define('Balaee.model.qb.QbquestionoptionModel',{
    extend: 'Ext.data.Model',
    idproperty:'',//fields property first position pk. 
    fields: ['optionId','questionId','isAnswer','option','media','keyword','mediaTypeId',],
    /*associations:[
    {type:'BelongsTo',  model:'Mediatype',  foreignKey:'mediaTypeId'},
    {type:'BelongsTo',  model:'Qbquestion', foreignKey:'questionId'},
    {type:'HasMany',    model:'Qbregistereduserfreequestionawnser', foreignKey:'answerOptionId'},
    ]*/
});

3)Here is my store :---

Ext.define('Balaee.store.qb.QbquestionoptionStore',{
    extend: 'Ext.data.Store',
    model: 'Balaee.model.qb.QbquestionoptionModel',
    //autoLoad: true,
    proxy:
    {
        type:'ajax',
        api:
        {
            read:'http://localhost/balaee/Balaee/index.php?r=QuestionBank/qbpaper/SetUserAnswer11',
            create: 'http://localhost/balaee/Balaee/index.php?r=QuestionBank/qbpaper/SetUserAnswer12',
            update: 'http://localhost/balaee/Balaee/index.php?r=QuestionBank/qbpaper/SetUserAnswer13',
            //destroy: ,
        },//End of api 
        reader:
        {
            type:'json',
            //root: ,
            //successProperty: ,
        },//End of reader
        writer:
        {
            type:'json',
            root:'data'
        }   
    }//End of proxy
});//End of store

how can I solve this? please give some suggestion....

Answer 1

Well, first you have to send it as JSON (at least I recommend that) and that can easily be done cause the Ext.Ajax.request() method supports this out of the box

Ext.Ajax.request({
    url: 'YourURL',
    jsonData: YourObjectRef, // can be any object or JSON string
    success: function(response, opts) {
        // your code
    }
});

And if you want to do it with a store use the type auto for the Modelfield. This type can contain any object. Here's a JSFiddle with a list of objects within a model.

Here is a modification of your store configuration. Note that you can either define a read only API or a CRUD API . For the later it is not possible to leave fe the destroy action unset. You also need to know that a root property within the writer implies that you want to encode your data, meaning all get send via get which is defiantly not what you want.

Now to what this proxy does: Per default batch will be true which would cause the store to submit all changes at once when sync get called. If there are more then one changes for a action the proxy will submit a array of objects instead of a single one. Now if you don't take care about this you would now need to predict if you get a object or a array of objects for each request. We don't want end up in something like this. But there is the allowSingle property on the writer which get us around this. If you set it to true it will always send a array of objects back to the server even if there is only one. You now know that you get a array each time.

proxy:{
    type:'ajax',
    api: {
        read:'index.php?r=...',
        create: 'index.php?r=...',
        update: 'index.php?r=...',
        destroy: 'index.php?r=...',
    },
    reader: {
        type:'json',
        root:'data'
    },
    writer: {
        type:'json',
        allowSingle: false
    }   
}

Answer 2

If you are wanting to submit several records from a store through in a single proxy request as an array, you should configure your writer with the allowSingle config to false . This will force your proxy request to wrap the request object in an array, even if only a single modle instance is being saved/added/etc.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.writer.Json-cfg-allowSingle

writer: {
    type:'json',
    root:'data',
    allowSingle: false
}