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 属性ではないため、当然うまくいきませんでした。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

余談ですが、カスタムの「data-」属性は必要ありません。Stripe.js のドキュメントに基づいて、フォームの値を直接使用してコントローラーから Stripe.card.createToken を呼び出すことができます。

于 2013-10-25T23:09:50.640 に答える