ExtJS 4 : How to know when any field in a form (Ext. form.Panel) 发生变化吗？

Question

我想要一个事件监听器，只要表单(即 Ext.form.Panel)中的任何字段发生更改，就会触发该事件监听器。但是，Ext.form.Panel 类本身不会触发事件。

监听表单中所有字段的“更改”事件的最佳方式是什么？

Answer 1

更新:根据评论中的提示添加了第三个选项(感谢@innerJL!)

好吧，看起来至少有两种相当简单的方法可以做到这一点。

选项 1) 向添加到表单的每个字段添加“更改”监听器:

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

这至少有一个很大的缺点；如果您将某些字段“包装”在其他容器中，然后将这些容器添加到表单中，它将无法识别嵌套字段。换句话说，它不会对组件进行“深度”搜索来查看它是否包含需要“更改”监听器的表单字段。

选项 2) 使用组件查询来监听从容器中的字段触发的所有“更改”事件。

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

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

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

选项 3) 监听从表单面板的底层“基本”表单 (Ext.form.Basic) 触发的“dirtychange”。 重要:您需要确保将 {trackResetOnLoad:true} 传递给表单面板构造函数，从而启用“trackResetOnLoad”。

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

这种做法是“最聪明的”；它可以让您知道表单何时被修改，还可以让您知道用户是否将其修改回原始状态。例如，如果他们将文本字段从“Foo”更改为“Bar”，则“dirtychange”事件将触发 isDirty 参数的“true”。但是，如果用户随后将字段重新更改为“Foo”，则“dirtychange”事件将再次触发，并且 isDirty 将假。