ExtJS 4: Wie Sie wissen, wenn ein Feld in einem Formular (Ext.form.Panel) ändert?

Ich hätte gerne ein Einzel-Ereignis-listener wird ausgelöst, wenn alle Feld in einem Formular (dh, Ext.form.Panel) ändert. Die Ext.form.Panel-Klasse nicht ausgelöst ein Ereignis für diese selbst, aber.

Was ist der beste Weg, um zu hören, für 'change' - events für alle Felder in einem Formular?

InformationsquelleAutor Clint Harris | 2011-12-19

  1. 19

    Update: Hinzugefügt eine 3. option, basierend auf dem Tipp in den Kommentaren (danke @innerJL!)

    Ok, sieht aus wie es gibt mindestens zwei Recht einfache Möglichkeiten, es zu tun.

    Option 1) Fügen Sie ein 'ändern' - listener auf jedes Feld, das dem Formular Hinzugefügt wird:

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

    Dieser hat mindestens einen großen Nachteil; wenn Sie "wrap" einige Felder in andere Behälter und fügen Sie die Behälter, um die form, es wird nicht erkannt das geschachtelte Felder. In anderen Worten, es macht nicht "tief" durchsuchen Sie die Komponente, um zu sehen, ob es enthält Formularfeld, das Brauch 'ändern' für die Zuhörer.

    Option 2) Verwenden Sie eine query-Komponente hören für alle 'change' - events ausgelöst, der von Feldern in einem container.

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

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

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

    Option 3) Hören für die 'dirtychange" gefeuert von der form-panel zugrunde liegenden "basic" - form (Ext.form.Basic). Wichtig: Sie müssen sicherstellen, dass müssen Sie aktivieren 'trackResetOnLoad', indem sichergestellt wird, dass {trackResetOnLoad:true} übergeben wird, um Ihre form-panel-Konstruktor.

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

    Dieser Ansatz ist der "Klügste"; es ermöglicht Ihnen zu wissen, Wann das Formular geändert wurde, sondern auch dann, wenn der Benutzer ändert es wieder auf den ursprünglichen Zustand. Zum Beispiel, wenn Sie ändern ein Textfeld aus "Foo" , "Bar", 'dirtychange' - Ereignis ausgelöst wird, mit 'true' für die isDirty-param. Aber wenn der Benutzer ändert dann das Feld zurück zu "Foo", die "dirtychange' - Ereignis ausgelöst wird wieder und isDirty wird false.

    vielleicht ist dieses Ereignis von BasicForm (yourForm.getForm()) könnte für Sie nützlich sein docs.sencha.com/ext-js/4-0/#!/api/...
    Wenn jemand eine Lösung hat für ExtJs 3 ich hätte Interesse.
    Seien Sie vorsichtig mit der 3. option. Listener wird ausgelöst, wenn isDirty - Eigenschaft des Formulars ändert. Das heißt, wenn Sie textfield-Objekt mit dem Wert "Foo" und der Benutzer ändert den Wert in "Bar" — dirtychange ausgelöst werden. Aber, wenn Benutzer, ändern Sie den Wert wieder auf "Pool" dirtychange werden NICHT ausgelöst, da isDirty Eigenschaft bereits true

    InformationsquelleAutor Clint Harris

  2. 6

    Möchte ich ergänzen Clint Antwort. Es ist eine weitere Ansatz (und ich denke es ist das beste für dein problem). Fügen Sie einfach change Zuhörer zu bilden Standardwerte config:

    Ext.create('Ext.form.Panel', {
    //...
    defaults: {
        listeners: {
            change: function(field, newVal, oldVal) {
                //alert(newVal);
            }
        }
    },
    //...
});
    Vielen Dank für den input! In meinem Fall habe ich eigentlich tun, müssen Sie eine benutzerdefinierte Klasse, die Sie erweitert form panel; auch ich will nur wissen, wenn ein Feld geändert wird von seinem ursprünglichen Wert ('dirtychange' vs. 'ändern') aber vielleicht gute Ratschläge für andere Szenarien, in denen diese beiden Anforderungen gelten nicht.
    Es gibt keine solche change-Ereignis in form panel, noch hört es auf.
    Ich habe nicht geschrieben, dass die form hat eine solche Veranstaltung. Formularfelder haben solche Ereignisse. In meinem Beispiel-handler NICHT zugewiesen wurde, zu bilden. Es wurde beauftragt, alle Felder des Formulars aus. Siehe die Standard config.
    Sollten Sie verwenden fieldDefaults statt, die richtig propagieren Feld Gruppen.

    InformationsquelleAutor Molecular Man

Schreibe einen Kommentar