ExtJS：编辑整个网格并一次保存答案

【问题标题】：ExtJS: Editing an entire grid and saving it all at onceExtJS：编辑整个网格并一次保存
【发布时间】：2013-04-12 13:56:58
【问题描述】：

我需要生成一个网格，其中所有行都处于编辑模式，并且可以通过单击“保存”按钮一次保存每行的值。这可能吗？如果是这样，最好的方法是什么？使用 ExtJs 的网格来满足这个要求是个好主意吗？通过查看 Ext Js 的示例，框架开发人员似乎非常鼓励一次编辑一行或一个单元格的网格，而不是整个表格。

我还想指出，分页不是必需的。

更新： 我正在使用 Ext JS 3.4。

【问题讨论】：

你想使用哪个版本的 ExtJS？
我正在使用 Ext JS v3.4
这个问题还没有解决吗？或者你在其他地方得到了答案？您可以使用 "store.getModifiedRecords()" 来实现它。如果问题仍然存在，请告诉我将发布相同的工作代码。

标签： extjs extjs3

【解决方案1】：

更新：好的，这对于 Ext JS v. 4.x 是正确的 :)

您可以做的是在底层存储中设置autoSync: false，这样它就不会立即将更改写入服务器。

在您的保存按钮上，您只需拨打grid.getStore().sync()

见：API - Ext.data.Store.sync()

【讨论】：

Mario，他正在使用 Ext JS v3.4，我猜这个 sync() 在 3.x 中不存在。

【解决方案2】：

下面的代码可能有帮助：

/**
 *   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");
 }
}

【讨论】：