Sencha ExtJs Modernで通貨入力のカスタムフィールドを実装

日本円の通貨入力のカスタムフィールドを実装してみました。

Ext.application({

    name: 'Fiddle',

    launch: function () {

        console.log('start.');

        Ext.define('User', {

            extend: 'Ext.data.Model',

            fields: [{

                name: 'phone',

                type: 'auto'

            }],

        });

        var panel = Ext.create('Ext.form.Panel', {

            fullscreen: true,

            focusable: false,

            items: [{

                xtype: 'fieldset',

                title: '通貨フィールドSample(日本円)',

                items: [{

                    xtype: 'currency-field',

                    label: '金額',

                }]

            }]

        });

    }

});

Ext.define('Ext.ux.field.CurrencyField', {

    extend: 'Ext.field.Text',

    xtype: 'currency-field',

    textAlign: 'right',

    statics: {

        PREFIX : '￥'

    },

    

    initialize: function() {

        this.callParent(arguments);

    },

    /**

     * カンマと￥を除去して値を取得

     */

    getValue : function() {

        var str = String(this.callSuper());

        if (str) {

            var num = parseFloat(str.replace(/[^\d\.-]/g,''));

            num = isNaN(num) ? '' : num

            return num;

        }

        return '';

    },

    /**

     * フォーカスを失った時にカンマと￥を付与

     */

    onBlur : function(obj, e, eOpts ) {

        var str = String(this.getValue());

        var tmp = Ext.util.Format.number(str, '0,000');

        if (tmp !== '') {

            var tmp = this.self.PREFIX + tmp;                    

        }

        this.setValue(tmp);

        return this.callSuper(arguments);

    },

    /**

     * フォーカスを得た時にカンマと￥を除去

     */

    onFocus: function (obj, e, eOpts) {

        this.setValue(this.getValue());

        return this.callSuper(arguments);

    }

});

以下にデモ＆ソースがあるので参考にしてみて下さい。
デモ＆ソース