Установка пользовательских атрибутов на текстовое поле Сенча Touch 2

Question

Я реализующий Stripe в моем Сенча 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, чтобы убедиться, что отображаемые поля ввода будут похожи в 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' 
}); 

После того, как вы добавили, что компонент приложения и REQ uired это, вы будете иметь возможность использовать его как это:

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

Answer 2

Больше как в сторону, вам не нужно обычая «DATA-» атрибуты. Основываясь на Stripe.js documentation, вы можете вызвать Stripe.card.createToken со своего контроллера со значениями из формы напрямую.