ExtJS 4: ¿Cómo saber cuándo cambia cualquier campo de un formulario (Ext.form.Panel)?

Question

Me gustaría un solo detector de eventos que se active cada vez que cualquier campo en un formulario (es decir, Ext.form.Panel) cambie. Sin embargo, la clase Ext.form.Panel no activa un evento para este.

¿Cuál es la mejor manera de escuchar eventos de 'cambio' para todos los campos de una forma?

Answer 1

actualización: (! Gracias @innerJL) ha añadido una tercera opción basada en la punta de los comentarios

Ok, parece que hay al menos dos maneras bastante simples para hacerlo.

Opción 1) Añadir un oyente 'cambio' a cada campo que se agrega a la forma:

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

Esto tiene al menos un gran inconveniente; si "ajusta" algunos campos en otros contenedores y luego agrega esos contenedores al formulario, no reconocerá los campos anidados. En otras palabras, no realiza una búsqueda "profunda" a través del componente para ver si contiene un campo de formulario que necesita "cambiar" oyentes.

Opción 2) Utilice una consulta de componentes para escuchar todos los eventos de 'cambio' disparados desde los campos de un contenedor.

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

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

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

Opción 3) Escuchar para el 'dirtychange' despedido de forma subyacente 'básico' (Ext.form.Basic) del panel de formato. Importante: debe asegurarse de habilitar 'trackResetOnLoad' asegurando que {trackResetOnLoad: true} se pase al constructor de su panel de formulario.

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

Este enfoque es el "más inteligente"; le permite saber cuándo se ha modificado el formulario, pero también si el usuario lo modifica a su estado original. Por ejemplo, si cambian un campo de texto de "Foo" a "Bar", el evento "dirtychange" se activará con "true" para isdirty param. Pero si el usuario luego cambia el campo a a "Foo", el evento 'dirtychange' disparará nuevamente y isDirty será .

Answer 2

Quiero complementar la respuesta de Clint. Hay un enfoque más (y creo que es lo mejor para su problema). Sólo tiene que añadir change oyente para formar valores por defecto de configuración:

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