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

我正在我的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"/>

我正在尝试添加：

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

---

但这自然不起作用，因为它不是一个有效的Sencha属性。如何在Sencha文本字段上设置自定义属性，以确保呈现的输入字段与上面的HTML相同？

Sencha Touch 2不提供这种开箱即用的行为。您需要扩展Ext.field.Input组件，它是Ext.field.Text中实际字段的内部组件，并添加设置该数据条带属性的功能。以下是该组件的一个未经测试的示例：

/**
 * @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.Loader.setPath({
    'Ext.ux': 'path/to/ux/folder'
});

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

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

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

/**
 * @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.Loader.setPath({
    'Ext.ux': 'path/to/ux/folder'
});

一旦您将该组件添加到应用程序中并需要它，您就可以像这样使用它：

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

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

---

Sencha Touch 2不提供这种开箱即用的行为。您需要扩展Ext.field.Input组件，它是Ext.field.Text中实际字段的内部组件，并添加设置该数据条带属性的功能。以下是该组件的一个未经测试的示例：

/**
 * @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.Loader.setPath({
    'Ext.ux': 'path/to/ux/folder'
});

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

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

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

/**
 * @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.Loader.setPath({
    'Ext.ux': 'path/to/ux/folder'
});

一旦您将该组件添加到应用程序中并需要它，您就可以像这样使用它：

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

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

---

更重要的是，您不需要自定义“data-”属性。基于，您可以从控制器直接使用表单中的值调用Stripe.card.createToken。

另外，您不需要自定义“data-”属性。基于，您可以使用表单中的值直接从控制器调用Stripe.card.createToken。

您需要覆盖组件。您需要覆盖组件。工作非常出色！谢谢但有一点小小的修正：xtype:'Ext.ux.field.Stripe'不能是类名，必须是xtype。我在Stripe输入组件上放置了一个xtype，并使用了它。以防万一有人来了。对不起，应该是xclass。威尔·费克斯，工作得很有魅力！谢谢但有一点小小的修正：xtype:'Ext.ux.field.Stripe'不能是类名，必须是xtype。我在Stripe输入组件上放置了一个xtype，并使用了它。以防万一有人来了。对不起，应该是xclass。我会修好的。