Salvataggio automatico tramite XmlHttpRequest da EditorGridPanel in ExtJS 3.0?

Question

Ho un EditorGridPanel in Ext JS 3.0, popolato tramite HttpProxy e JsonReader, e ho una colonna modificabile " funzionante " - Posso modificare il valore e lo contrassegna come sporco.

Ora, come posso ottenerlo, dopo che una cella è stata modificata, inviare un XmlHttpRequest al server con alcuni parametri di base, il campo ID della riga, il nome della colonna è cambiato e il nuovo valore?

Una volta effettuata la richiesta, l'aggiornamento sul lato server è semplice. Ma nessuna quantità di Google e scavare attraverso i banali esempi EditGridPanel in memoria aiuta a far sì che EditGridPanel effettui la chiamata.

Quello che non sto cercando:

1. REST - basta aggiornare tramite GET o POST normale
2. Inserisci nuovi record o elimina righe: gli aggiornamenti solo per ora.
3. Aggiornamenti in batch: modifica di una sola cella alla volta.
4. Un sacco di codice - questo dovrebbe essere banale, come Ajax.InPlaceEditor in Scriptaculous

Answer 1

Alla fine l'ho capito ... avevo solo bisogno di uno scrittore nel mio negozio:

var ds = new Ext.data.JsonStore({
    autoSave:       true,
    url:            "ajax-handler.aspx",
    method:         "POST",
    timeout:        120000,
    root:           "rows",
    totalProperty:  "results",
    idProperty:     "primarykeyvalue",
    fields:         previewColumnConfig,
    baseParams:     {
        now:        (new Date()).getTime()
        },
    writer: new Ext.data.JsonWriter({
        encode:     true,
        listful:    false
        })
    });

Note:

• Il " ora " baseparam è quello di aggirare "alcuni browser" (immagina) memorizzazione nella cache dei risultati AJAX
• " encode " restituisce le variabili POST anziché un semplice risultato JSON in POST.
• " listful " è disabilitato perché l'utente sta modificando solo una riga / colonna alla volta, non è necessario progettare il parser sul lato server per inserire un array, può aspettarsi solo una riga.
• Sì, ho un valore di timeout molto lungo .
• previewColumnConfig è stato precedentemente definito, memorizza le definizioni delle mie colonne.

Answer 2

È possibile utilizzare l'evento afteredit per Ext.grid.EditorGridPanel che verrà attivato dopo che l'editor è sfocato. Inoltre, è possibile impostare un metodo di controllo periodico (intervallo) quando viene generato l'evento beforeedit e cancellarlo quando viene attivato l'evento afteredit.

Esempio di afteredit:

EditorGridPanel.getColumnModel().getCellEditor(column).on('afteredit', function() {
    //do ajax call for the update.
});

Fammi sapere se hai bisogno di un esempio per il controllo periodico e ne scriverò uno.