ExtJS 4: Jak sprawdzić, kiedy zmienia się dowolne pole formularza (Ext.form.Panel)?

Question

Chciałbym, aby pojedynczy detektor zdarzeń, który uruchamia się, zmienia się gdy każde pole dowolnej zmiennej w formie (np. Ext.form.Panel) ulega zmianie. Jednak klasa Ext.form.Panel nie uruchamia zdarzenia dla tego samego.

Jaki jest najlepszy sposób na odszukanie zdarzeń "zmiany" dla wszystkich pól w formularzu?

Answer 1

Aktualizacja (!) Dzięki @innerJL Dodano 3rd opcję opartą na końcówkę w komentarzach

Ok, wygląda istnieje przynajmniej dwa dość proste sposoby, aby to zrobić.

wariant 1) Dodaj „zmiany” słuchacza dla każdego pola, które dodaje się do postaci:

Ext.define('myapp.MyFormPanel', { 
    extend: 'Ext.form.Panel', 
    alias: 'myapp.MyFormPanel', 
    ... 

    handleFieldChanged: function() { 
    // Do something 
    }, 

    listeners: { 
    add: function(me, component, index) { 
     if(component.isFormField) { 
     component.on('change', me.handleFieldChanged, me); 
     } 
    } 
    } 
}); 

ta ma co najmniej jedną wielką wadę; jeśli "zawiniesz" niektóre pola w innych kontenerach, a następnie dodasz te pojemniki do formularza, nie rozpoznasz zagnieżdżonych pól. Innymi słowy, nie wykonuje "głębokiego" przeszukiwania komponentu, aby zobaczyć, czy zawiera ono pole formularza, które wymaga "zmiany" słuchaczy.

Opcja 2) Użyj zapytania komponentu, aby wysłuchać wszystkich zdarzeń "zmian" wystrzelonych z pól w kontenerze.

Ext.define('myapp.MyController', { 
    extend: 'Ext.app.Controller', 
    ... 

    init: function(application) { 
    me.control({ 

     '[xtype="myapp.MyFormPanel"] field': { 
      change: function() { 
       // Do something 
      } 
     } 
    }); 
    } 
}); 

Opcja 3) Posłuchaj dla 'dirtychange' wystrzelonego z bazowego 'podstawowego' postaci panelu w formularzu (Ext.form.Basic). Ważne: Musisz upewnić się, że musisz włączyć opcję "trackResetOnLoad", upewniając się, że {trackResetOnLoad: true} jest przekazywane do konstruktora panelu formularzy.

Ext.define('myapp.MyFormPanel', { 
    extend: 'Ext.form.Panel', 
    alias: 'myapp.MyFormPanel', 
    constructor: function(config) { 
    config = config || {}; 
    config.trackResetOnLoad = true; 
    me.callParent([config]); 

    me.getForm().on('dirtychange', function(form, isDirty) { 
     if(isDirty) { 
      // Unsaved changes exist 
     } 
     else { 
      // NO unsaved changes exist 
     } 
    }); 
    } 
}); 

To podejście jest "najmądrzejsze"; pozwala na poznanie, kiedy formularz został zmodyfikowany, ale także, jeśli użytkownik zmodyfikuje go z powrotem do jego oryginalnego stanu. Na przykład, jeśli zmienią pole tekstowe z "Foo" na "Bar", zdarzenie "brudne zmiany" będzie wyświetlało "true" dla parametru isDirty. Ale jeśli użytkownik zmieni następnie pole z powrotem na na "Foo", zdarzenie "brudne zmiany" będzie ponownie uruchamiać i będzieDirty będzie fałszywe.

Answer 2

Chcę uzupełnić odpowiedź Clinta. Jest jeszcze jedno podejście (i myślę, że to jest najlepsze dla twojego problemu). Wystarczy dodać change słuchacza do formularza domyślne config:

Ext.create('Ext.form.Panel', { 
    // ... 
    defaults: { 
     listeners: { 
      change: function(field, newVal, oldVal) { 
       //alert(newVal); 
      } 
     } 
    }, 
    // ... 
});