How to remove the “name” param in for fields in ExtJS 4

2
votes

I am integrating a payment provider into a ExtJS websites.

Basically, a form needs to be created and the form fields is send to the payment provider using Ajax.

The problem is that the payment provider does not allow that the form fields has a "name" param assigned to the "" tag. They do a manual check of the implementation and makes sure it is not there.

I assume it is a counter-mesasure for when the visitor has Ajax dissabled and the form gets submitted to my server instead, revealing the credit card. I know it does not make any sense with ExtJS, as it would not work without Javascript turned on, but non-the-less, that is the rule from the payment provider.

So, how can I force ExtJS to not put a "name" param in the form field? I have tried putting "name: ''" into the fields, but that gets ignored.

Do I use the template-system in ExtJS to solve this?

3
javascriptextjsextjs4extjs4.1extjs4.2
Your question needs improvement, where's the code you're using? What's the output it's creating? Questions without code are not a good fit for SO. - Juan Mendes
This is a very strange rule. You could use DOM query to find and manipulate your DOM element to your heart content. You could do it in the after render listener. But how would ExtJS submit data with a form field with no name??? - dbrin
Modify the field template for this field to leave out the name attribute but that would make submitting impossible AFAIK. Anyway, that is the solution you are looking for. - sra
@sra: Yeah, that's what I was thinking. Do you have an example code how that would look though? Extjs will not submit the form anyways, so that is all fine :) The javascript that I was provided by the payment provider is reading the form-values based on the IDs and makes a manual ajax-call. No form submit needed. - Daniele Testa
@JuanMendes: Why did you downvote my question? Obviously several people understood just fine what I was asking. - Daniele Testa

3 Answers

4
votes

So Eric is perfectly right that it can be done much easier then modifying the whole template but non the less I would use a plugin for such a special case. I made a quick one:

Ext.define('Ext.form.field.plugin.NoNameAttribute', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.nonameattribute',
    init: function(cmp) {
        Ext.Function.interceptAfterCust(cmp, "getSubTplData", function(data){
            delete data['name'];
            return data;
        });
    }
});

Note the used method interceptAfterCust is a custom one of mine that modify the existing one by handing the result of the original to the intercepting one as argument. It is also using the given original object (which can be threaten as a scope) as scope for the original method. The easiest would be to add these method to Ext.Function

Ext.Function.interceptAfterCust = function(object, methodName, fn, scope) {
    var method = object[methodName] || Ext.emptyFn;

    return (object[methodName] = function() {
        return fn.call(scope || this, method.apply(object, arguments));
    });
}

Here is a working JSFiddle where the first field will not have a name attribute on the dom even if it exist in the component.

0
votes

There's a surprisingly simple solution to this. I tested it with Ext.form.field.Text and Ext.form.field.ComboBox and it works well, but I don't know if it works for all form fields or if there are any negative side-effects. Use with caution.

Ext.define('Override.form.field.Base', {
    override: 'Ext.form.field.Base',

    getSubTplData: function(){
        var data = this.callParent(arguments);
        delete data.name;
        return data;
    }
});

Basically, it removes the auto-generated name from the render data before passing it along. The best part is that no private methods are involved so this should be a stable solution.

0
votes

I prefer this in the field config options:

submitValue: false

Available since ExtJS 3.4