Question

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

我还要注意，分页不是必需的。

更新我正在使用Ext JS 3.4。

Answer 1

更新：好的，这对于Ext JS诉4.x来说是正确的：）

您可以做的是在基础商店中设置autoSync: false，以便它不会立即将更改写入服务器。

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

即可

请参阅：API - Ext.data.Store.sync()

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

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

2 个答案: