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

Posted 2023-02-26

【中文标题】ExtJS：编辑整个网格并一次保存

【英文标题】：ExtJS: Editing an entire grid and saving it all at once

【发布时间】：2013-04-12 13:56:58

【问题描述】：

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

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

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

【问题讨论】：

你想使用哪个版本的 ExtJS？

我正在使用 Ext JS v3.4

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

【参考方案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");