Invio di un modulo + griglia in ExtJS 4

Question

Possiedo un oggetto Ext.form.Panel contenente una griglia e alcuni campi di testo per la modifica di ogni riga nella griglia. È molto simile a questo: http://dev.sencha.com/deploy/ext-4.0.2a/examples/writer/writer.html, solo che non è coinvolto AJAX; il mio archivio dati è locale.

Come posso inviare le righe della griglia tramite un POST standard?

Se faccio semplicemente myForm.submit(), ci sono due questioni:

1. I campi per la modifica righe della griglia vengono convalidati. Dovrebbero essere ignorati quando si invia il modulo.

2. Nessun dato dalla griglia è stato inviato.

L'unica soluzione che vedo è quello di prevenire in qualche modo i campi di essere convalidato e creare alcuni campi nascosti contenenti i dati da ogni riga. C'è qualche opzione migliore?

Grazie in anticipo!

Answer 1

Ecco la soluzione che ho usato:

1. Per ignorare determinati campi del modulo al momento della presentazione, ho sovrascritte le getFields() della forma. Cattivo, lo so. Nel codice sottostante, i campi con una proprietà 'ignoreInMainForm' verranno ignorati.

   Ext.getCmp('myForm').getForm().getFields = function() { 
       var fields = this._fields; 
       if (!fields) { 
        var s = [], 
        t = this.owner.query('[isFormField]'); 
        for (var i in t) { 
         if (t[i]['ignoreInMainForm'] !== true) { 
          s.push(t[i]); 
         } 
        } 
        fields = this._fields = Ext.create('Ext.util.MixedCollection'); 
        fields.addAll(s); 
       } 
       return fields; 
   } 
   

2. Per la presentazione dei dati della griglia, che codificano tutte le righe di un singolo oggetto JSON che posso aggiungere nel baseParams della maschera.

   var myItems = myStore.getRange(); 
   var myJson = []; 
   for (var i in myItems) { 
       myJson.push({ 
        'a': myItems[i].get('a'), 
        'b': myItems[i].get('b'), 
        ... 
       }); 
   } 
   Ext.getCmp('formHiddenId').setValue(Ext.encode(myJson)); 
   

Answer 2

Quella parte ha funzionato per me - in ExtJS 4.0.2a, non ho potuto aggiungere alle baseParams, così invece ho innescato il gestore di trasmissione per fare invece:

function prepareToSendForm(a, b) { 
var myItems = Ext.getCmp('grid-links').store.getRange(); 
var myJson = []; 
for (var i in myItems) { 
    myJson.push({ 
     'title': myItems[i].get('title'), 
     'url': myItems[i].get('url'), 
     'refreshes': myItems[i].get('refreshes') 
    }); 
} 

//Update the hidden field to be the JSON of the Grid 
for (var i=0, len=Ext.getCmp('roomCreateForm').getForm()._fields.items.length; i<len; i++) { 
    var item = Ext.getCmp('roomCreateForm').getForm()._fields.items[i]; 
    if (item.name=='roomLinks') { 
     Ext.getCmp('roomCreateForm').getForm()._fields.items[i].inputEl.dom.value=Ext.encode(myJson); 
     break; 
    } 
} 

Ext.getCmp('roomCreateForm').submit(); 
} 

Quale lavorato ha un fascino (ma non è molto plug-and-play). Ho dovuto creare un campo nascosto (chiamato roomLinks sopra) nel modulo, e il secondo per il ciclo sopra lo trova e sostituisce il valore con i risultati JSONed.