Set custom attribute on textfield Sencha Touch 2

问题

I am implementing Stripe in my Sencha Touch 2 application, and they require that I have set a custom data- HTML5 attribute on the respective input fields ala this:

<input type="text" size="20" data-stripe="number"/>
<input type="text" size="4" data-stripe="cvc"/>
<input type="text" size="2" data-stripe="exp-month"/>
<input type="text" size="4" data-stripe="exp-year"/>

I have defined my input fields in the view like this:

{
    xtype:'textfield',
    name:'expirationYear',
    'data-stripe':'exp-year',
    label:'Expiration',
    placeHolder:'Expiration Year (YYYY)'
}

I was experimenting with adding:

'data-stripe':'exp-year',

But that naturally didnt work since its not a valid Sencha attribute. How can I set custom attributes on the Sencha textfields to make sure the rendered input fields will be like in the HTML above?

回答1:

Sencha Touch 2 does not provide this behaviour out of the box. You will need to extend the Ext.field.Input component (which is the internal component for the actual fields in Ext.field.Text) and add the functionality to set that data-stripe attribute. Here is an untested example of that component:

/**
 * @class Ext.ux.field.Stripe
 *
 * An input component to allow setting of `data-stripe` attribute.
 */
Ext.define('Ext.ux.field.Stripe', {
    extend: 'Ext.field.Input',

    config: {
        /**
         * @cfg {String} The value to set for the `data-stripe` attribute on the field
         * @accessor
         */
        data: null
    },

    /**
     * Updates the `data-stripe` attribute with the {@link #stripe} configuration.
     * @private
     */
    updateData: function(newData) {
        this.updateFieldAttribute('data-stripe', newData);
    }
});

You can add this to your application by adding it to the 'requires' property of your view:

Ext.define('MyApp.view.MyView', {
    requires: ['Ext.ux.field.Stripe']
});

And you will need to add the following code to the top of your app.js file, so the framework knows where to find the custom component:

Ext.Loader.setPath({
    'Ext.ux': 'path/to/ux/folder'
});

Once you have added that component to your application and required it, you will be able to use it like this:

{
    xtype: 'field',
    component: {
        xclass: 'Ext.ux.field.Stripe',
        data: 'exp-month'
    }
}

回答2:

More as an aside, you don't need the custom 'data-' attributes. Based on the Stripe.js documentation, you can call Stripe.card.createToken from your controller with the values from the form directly.

来源：https://stackoverflow.com/questions/16997621/set-custom-attribute-on-textfield-sencha-touch-2

标签

sencha-touch-2