Search code examples
javascriptextjsextjs4extjs4.1extjs4.2

How to remove the "name" param in for fields in ExtJS 4


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?


Solution

  • 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.