ExtJS 4:如何知道表单中的任何字段(Ext.form.Panel)何时发生变化？

Question

我想要一个单独的事件监听器,只要表单中的任何字段(即Ext.form.Panel)发生变化就会触发.但是,Ext.form.Panel类不会为此本身触发事件.

在表单中监听所有字段的"更改"事件的最佳方法是什么？

Answer 1

更新:根据评论中的提示添加了第3个选项(感谢@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将为false.

Answer 2

我想补充克林特的答案.还有一种方法(我认为这对你的问题最好).只需将change监听器添加到表单的默认配置:

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