开发者

Saving the whole EditorGrid with a single Ajax request

I would like to save an ExtJS (3.3.1) editorgrid with a single Ajax request.

I've created an editorgrid, based on an ArrayStore.

var store = new Ext.data.ArrayStore({
    data: arrayData,
    fields: [ 'id', 'qty', 'idService', 'idSubscription', 
                      'description', 'vat', 'amount' ]
});
    [...]
var grid = {
    xtype: 'editorgrid',
    store: store,
    view: gridView,
    colModel: colModel,
    selModel: selModel,
    stripeRows: true,
    tbar: tbar,
    autoHeight: true,
    width: 872,
    clicksToEdit: 1
};

I've created a Save button with the following handler:

app.inv.saveButtonHandler = function () {
    var myForm = Ext.getCmp("formHeader").getForm();
    if (!myForm.isValid()) {
        Ext.MessageBox.alert('Form Not Submitted', 
                        'Please complete the form and try again开发者_C百科.');
        return;
    }
    myForm.el.mask('Please wait', 'x-mask-loading');
    Ext.Ajax.request({
        params: { 
            idCustomer: myForm.findField("idCustomer").getValue(),
            issueDate: myForm.findField("issueDate").getValue(),
            documentType: myForm.findField("documentType").getValue(),
            documentNumber: myForm.findField("documentNumber").getValue()           
        },
        url: 'save-sales-document-action',
        method: 'POST',
        success: function (response, request) {
            myForm.el.unmask();
            Ext.MessageBox.alert('Success', 'Returned: ' + response.responseText);
        },
        failure: function (response, request) {
            myForm.el.unmask();
            Ext.MessageBox.alert('Failed', 'Returned: ' + response.responseText);
        }
    });
};

In other words, I can send form elements with a simple value, but I don't know how to send the whole data grid. I would like to send the whole data grid with a single Ajax request.

I've already used before the cell-by-cell saving method, but in this case I would prefer to save the whole grid in one go. I don't need help for the server-side part, that I will do in Java, only for the client-side JavaScript.

Can someone help? Thanks!


After a night sleep and still no answers, I made further tries and I can answer my own question. I will leave the question open anyway, in case someone knows a better way.

To solve my problem, I added the property "storeId: 'gridStore'" to the ArrayStore, so I could locate the store later with Ext.StoreMgr.lookup(), then, at saving time, I proceed to re-build an Array record by record in the following way:

var gridData = new Array();
Ext.storeMgr.lookup('gridStore').each(function (record) {
    gridData.push(record.data);
});

The essential part is that I don't get the whole Record, but only the data field of it.

After I've an array with the data, the easy part is add it to the params of Ajax.request:

params: {
    ...
    gridData: Ext.encode(gridData)
},

This finally works. All the data is encoded in a single field. Of course on the server it will have to be decoded.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜