CODEWITHSUNDEEP
javascriptformsextjsextjs3
Anthony
Anthony

Reputation: 686

ExtJs, custom TextField's getValue() function not being called when form is submitted

I have a custom text field that extends Ext.form.TextField (ExtJs 3.1.1). I have overridden getValue to submit a calculated value instead of the raw value in the superclass. When calling getValue directly the return value is correct. However when submitting the parent form, getValue is not being called at all (debug messages in the getValue method do not appear in the console). How can I override the value returned when the form is submitted? Isn't getValue the correct method to override?

Here's the general layout of the class (I can't provide the actual code):

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

The above is working fine in terms of calculating myValue and returning it when getValue is called. However when added in a form, the value in the Ext.form.TextField is being returned, and I have also noticed that MyField.getValue is not being called at all when FormPanel.getForm().submit() is called on the parent FormPanel object.

Upvotes: 2

Views: 1858

Answers (1)

jstricker
jstricker

Reputation: 2180

I don't think you can achieve what you're trying to do without overriding a lot more behavior.

If you debug into the submit action, you'll see the following in 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
}));

Note that it passes the actual form DOM element (i.e. this.form.el.dom) which would contain your field's actual value, not your calculated value.

If you continue debugging, you'll see that within the call to Ext.Ajax.request the form parameter gets serialized via Ext.lib.Ajax.serializeForm(form). The resulting serialized value is passed into Ext.lib.Ajax.request as the data parameter. That value is what is actually sent to the server.

Upvotes: 2

Related Questions