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 。< / p>

Answer 2

我想补充克林特的回答。还有一种方法（我认为这对你的问题最好）。只需将change侦听器添加到表单的默认配置：

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

ExtJS 4：如何知道表单中的任何字段（Ext.form.Panel）何时发生变化？

2 个答案: