javascript - ExtJs，提交表单时未调用自定义 TextField 的 getValue() 函数

Question

我有一个扩展 Ext.form.TextField (ExtJs 3.1.1) 的自定义文本字段。我已覆盖 getValue 以提交计算值而不是父类(super class)中的原始值。当直接调用 getValue 时，返回值是正确的。但是，当提交父表单时，根本不会调用 getValue(getValue 方法中的调试消息不会出现在控制台中)。如何覆盖提交表单时返回的值？ getValue 不是要覆盖的正确方法吗？

这是类的总体布局(我无法提供实际代码):

MyField = Ext.extend(Ext.form.Textfield, {
    constructor: function(config) {
        [initialize some basic variables....]
        MyField.superclass.constructor.call(this, config);
    },

    initComponent : function() {
         this.on('keypress', this.handler, this);
    },

    handler : function(field, event, args) {
         [set an internal value this.myValue based on superclass value]
    },

    getValue : function () {return this.myValue;}
});

上面的代码在计算 myValue 并在调用 getValue 时返回它方面工作正常。但是，当添加到表单中时，将返回 Ext.form.TextField 中的值，而且我还注意到 MyField.getValue 根本没有被调用FormPanel.getForm().submit() 在父 FormPanel 对象上调用。

Answer 1

我认为如果不覆盖更多的行为，您将无法实现您想要做的事情。

如果调试提交操作，您将在 Ext.form.Action.Submit 中看到以下内容:

Ext.Ajax.request(Ext.apply(this.createCallback(o), {
    form:this.form.el.dom,
    url:this.getUrl(isGet),
    method: method,
    headers: o.headers,
    params:!isGet ? this.getParams() : null,
    isUpload: this.form.fileUpload
}));

请注意，它会传递实际的表单 DOM 元素(即 this.form.el.dom)，其中包含您的字段的实际值，而不是您的计算值。

如果继续调试，您将看到在调用 Ext.Ajax.request 时，form 参数通过 Ext.lib.Ajax 序列化.serializeForm(表单)。生成的序列化值作为 data 参数传递到 Ext.lib.Ajax.request 中。该值是实际发送到服务器的值。