CODEWITHSUNDEEP
extjsextjs3
burnt1ce
burnt1ce

Reputation: 14917

ExtJS: Editing an entire grid and saving it all at once

I have a requirement to produce a grid where all the rows are in edit mode and values for each row can be saved at once by a single click of a Save button. Is this possible? If so, what's the best way of doing this? Is it a good idea to use ExtJs' grid for this requirement? By looking at Ext Js' examples, the framework developers seem to highly encourage grids to be edited at one row or cell at a time instead of the entire table.

I would also like to note that paging is not a requirement.

Update: I'm using Ext JS 3.4.

Upvotes: 1

Views: 3629

Answers (2)

vajrakumar
vajrakumar

Reputation: 758

May be below code helps :

/**
 *   This method is called on save button click by passing the grid object as a parameter
 */
saveGridModifiedRecords = function (yourGrid) {
    Ext.getCmp("yourGridId").body.mask('Saving Record Please Wait...');
    var modifiedRecords = yourGrid.getStore().getModifiedRecords();
    var CIxml = StringToXML("<Root/>");
    for (var i = 0; i < modifiedRecords.length; i++) {
        var fields = modifiedRecords[i]; // Gives you each edited record
        var cuurElem = CIxml.createElement("I");
        cuurElem.setAttribute("name", fields.get("name")); // Here name is the dataindex of a field
        cuurElem.setAttribute("category", fields.get("category")); // Here category is the dataindex of a field
        CIxml.documentElement.appendChild(cuurElem);
    }

    Use an AJAX call to send this xml with modified records to server.

    Ext.Ajax.request({
        url : 'yourWebServiceURL/parameter1/parametr2',
        method : 'POST',
        timeout : 120000,
        params : {
            'strIPXML' : CIxml.xml
        }, // We are passing xml as a string here by using .xml
        success : function (response) {
            // Extract response.resposeXML for a xml format of response else response.responseText for a string.
            Ext.getCmp("yourGridId").body.unmask();
            alert('In success');
        },
        failure : function (response) {
            alert('In Failure');
            if (Ext.getCmp("yourGridId")) {
                Ext.getCmp("yourGridId").body.unmask();
            }
        }
    });
}

function StringToXML(oString) {
 //code for IE
 if (window.ActiveXObject) { 
 var oXML = new ActiveXObject("Microsoft.XMLDOM"); oXML.loadXML(oString);
 return oXML;
 }
 // code for Chrome, Safari, Firefox, Opera, etc. 
 else {
 return (new DOMParser()).parseFromString(oString, "text/xml");
 }
}

Upvotes: 1

Mario David
Mario David

Reputation: 1615

Update: Ok, this is just correct for Ext JS v. 4.x :)

What you could do is to set in the underlying Store the autoSync: false, so that it will not immediately write the changes to the server.

On your Save Button you just call grid.getStore().sync()

see: API - Ext.data.Store.sync()

Upvotes: 1

Related Questions