在文本字段Sencha Touch 2上设置自定义属性 [英] Set custom attribute on textfield Sencha Touch 2

问题描述

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

推荐答案

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'
    }
}

这篇关于在文本字段Sencha Touch 2上设置自定义属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！