2

我在我的 Sencha Touch 2 应用程序中实现 Stripe，他们要求我在相应的输入字段上设置自定义 data- 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 文本字段上设置自定义属性以确保呈现的输入字段与上面的 HTML 中的一样？

4

2 回答 2

3

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

您可以通过将其添加到视图的“requires”属性来将其添加到您的应用程序中：

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'
    }
}
于 2013-06-08T10:21:32.927 回答
1

顺便说一句，您不需要自定义“数据-”属性。根据Stripe.js 文档，您可以使用表单中的值直接从控制器调用 Stripe.card.createToken。

于 2013-10-25T23:09:50.640 回答