ExtJs，提交表单时未调用自定义TextField的getValue（）函数

Posted 2023-02-26

【中文标题】ExtJs，提交表单时未调用自定义TextField的getValue（）函数

【英文标题】：ExtJs, custom TextField's getValue() function not being called when form is submitted

【发布时间】：2014-08-18 19:28:31

【问题描述】：

我有一个扩展 Ext.form.TextField (ExtJs 3.1.1) 的自定义文本字段。我已覆盖 getValue 以提交计算值而不是超类中的原始值。直接调用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 中的值会被返回，而且我还注意到在父 FormPanel 对象上调用FormPanel.getForm().submit() 时根本没有调用MyField.getValue。

【问题讨论】：

你能提供一个你的代码示例吗？

我无法分享代码，但我会添加一个我正在尝试做的示例

ExtJs 3.4 有一个 submitValue 属性，试试这个，将 submitValue: true 添加到组件的配置中。不幸的是，我在 sencha 文档中没有找到这个版本（3.1）

submitValue 默认为 true。该字段正在提交，这不是问题，该值是从超类中获取的，我该如何覆盖它？

很好，然后你必须更正你的setValue，像这样： setValue: function(value) MyField.superclass.setValue.call(this, value);

【参考方案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(form) 被序列化。生成的序列化值作为data 参数传递给Ext.lib.Ajax.request。该值是实际发送到服务器的值。

【讨论】：

非常详细的答案。