Question

我在Sencha Touch 2应用程序中实现了Stripe，他们要求我在相应的输入字段中设置自定义数据-HTML5属性：

<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"/>

我在视图中定义了输入字段，如下所示：

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

我正在尝试添加：

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

但由于它不是一个有效的Sencha属性，所以自然没有用。如何在Sencha文本字段上设置自定义属性，以确保渲染的输入字段与上面的HTML一样？

Answer 1

Sencha Touch 2不提供开箱即用的此功能。您需要扩展Ext.field.Input组件（这是Ext.field.Text中实际字段的内部组件），并添加设置data-stripe属性的功能。以下是该组件未经测试的示例：

/**
 * @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);
    }
});

您可以将其添加到您的应用的“需要”属性中，将其添加到您的应用中：

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

您需要将以下代码添加到app.js文件的顶部，以便框架知道在哪里可以找到自定义组件：

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

将该组件添加到您的应用程序并需要它之后，您将能够像这样使用它：

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

Answer 2

除此之外，您不需要自定义'data-'属性。根据{{3}}，您可以直接使用表单中的值从控制器调用Stripe.card.createToken。

在文本字段Sencha Touch 2上设置自定义属性

2 个答案: