使用單個Ajax請求保存整個EditorGrid

我想用一個Ajax請求保存ExtJS（3.3.1）editorgrid。使用單個Ajax請求保存整個EditorGrid

我已經創建了一個基於ArrayStore的editorgrid。

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 
};

我創建了一個保存按鈕具有以下處理：

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.'); 
     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); 
     } 
    }); 
};

換句話說，我可以發送表單元素用一個簡單的價值，但我不知道如何發送整個數據網格。我想用一個Ajax請求發送整個數據網格。

我已經在逐個單元格保存方法之前使用過，但在這種情況下，我寧願一次保存整個網格。我不需要服務器端部分的幫助，我會用Java來完成，僅用於客戶端JavaScript。

有人可以幫忙嗎？謝謝！

來源

2011-04-30 stivlo

我試圖將屬性「storeId：'gridStore'」添加到ArrayStore。然後嘗試Ext.encode（Ext.StoreMgr.lookup（'gridStore'）。data）;但我得到錯誤'太多遞歸'，即使我嘗試Ext.encode（Ext.StoreMgr.lookup（'gridStore'）。getAt（0）） – stivlo 2011-05-01 03:14:01

經過一夜的睡眠，仍然沒有答案，我做了進一步的嘗試，我可以回答我自己的問題。無論如何，我會留下這個問題，以防有人知道更好的方法。

爲了解決我的問題，我將屬性「storeId：'gridStore'」添加到ArrayStore中，以便稍後可以使用Ext.StoreMgr.lookup（）查找商店，然後在保存時重新進行-build通過記錄數組記錄以下列方式：

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

的重要組成部分是，我沒有得到全程記錄，但只有它的數據字段。

我已經與數據的數組後，比較容易的部分是將它添加到的Ajax.Request的PARAMS：

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

這最後的作品。所有數據都編碼在一個字段中。當然，在服務器上它將不得不被解碼。

來源

2011-05-01 03:52:25 stivlo

您的解決方案看起來很好。我唯一真正的建議是使用'store.getModifiedRecords（）'獲得一個只有已修改記錄的數組。如果你這樣做的話，一定要設置'pruneModifiedRecords'來清除加載時的髒列表（或者在服務器端成功後自己清除髒位）。 – wes 2011-05-03 02:52:10

非常有趣，謝謝你。 – stivlo 2011-05-03 04:35:20

使用單個Ajax請求保存整個EditorGrid

回答

相關問題