extjs 5 textfield 金额控件扩展

1.可自已设置金额正、负是分别用绿、红色表字体；

2.显示带币种符号，提交时不会为数值提交；

3.extjs 5.10测试

 

/**
 * extjs form money field.
 *
 *
 * @author <a href='mailto:[e-mail]'>xiaomingyang</a> 2016年3月2日，15时6分
 * @version v0.1
 * @since 5.0
 */
Ext.define('Ext.form.field.MoneyField', {
    xtype : 'money',
    requires: [
    ],
    alias : 'widget.MoneyField',
    extend : 'Ext.form.field.Text',
    alternateClassName: 'Ext.form.field.MoneyField',

    fieldLabel : '',

    fieldStyle : {
        "text-align":"right"
    },

    minValue: Number.NEGATIVE_INFINITY,

    maxValue: Number.MAX_VALUE,

    minText : "金额最小为 {0}",

    maxText : "金额最大为 {0}",

    nanText : "{0} 不是一个有效金额",

    /**
     * 默认币种标志
     */
    moneyCharactor : '￥',

    /**
     * 金额格式
     */
    moneyFormatter : '0,000.00',

    /**
     * 是否使用红绿字提示
     */
    moneyColored : true,

    /**
     * 小数允许
     */
    allowDecimals : true,

    /**
     * 负数允许
     */
    allowNegative : true,

    baseChars : "0123456789",

    decimalSeparator : '.',

    /**
     * 保留小数位数
     */
    decimalPrecision : 2,

    value : 0,

    _displayVal : 0,

    _submitVal : 0,

    listeners: {
        'focus': function(_this, event, eOpts) {
            this.value = this._submitVal;
            this.setRawValue(this.value);
        }
    },

    initComponent: function() {
        this.setValue(this.value);
        this.callParent(arguments);
    },

    setValue : function(v) {
        var v = this.parseValue(v);
        if (v) {
        } else {
            v = 0;
        }
        this._submitVal = this.fixPrecision(v);
        this._displayVal = this.moneyCharactor + ' ' + Ext.util.Format.number(this._submitVal, this.moneyFormatter);
        arguments[0] = this._displayVal;
        this.callParent(arguments);
        if (this.moneyColored) {
            if (this._submitVal >= 0) {
                this.setFieldStyle({
                    "text-align":"right",
                    "color" : 'GREEN'
                });
            } else {
                this.setFieldStyle({
                    "text-align":"right",
                    "color" : 'RED'
                });
            }
        }
    },

    beforeBlur : function() {
        var v = this.parseValue(this.getRawValue());
        this.setValue(v);
    },

    validateValue : function(value) {
        value = this._submitVal == '' ? 0 : this._submitVal;
        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
            return true;
        }
        value = String(value).replace(this.decimalSeparator, ".");
        if(isNaN(value)){
            this.markInvalid(String.format(this.nanText, value));
            return false;
        }
        var num = this.parseValue(value);
        if(num < this.minValue){
            this.markInvalid(String.format(this.minText, this.minValue));
            return false;
        }
        if(num > this.maxValue){
            this.markInvalid(String.format(this.maxText, this.maxValue));
            return false;
        }
        return true;
    },

    parseValue : function(value){
        value = parseFloat(String(value).replace(this.decimalSeparator, "."));
        return isNaN(value) ? '' : value;
    },

    fixPrecision : function(value){
        var nan = isNaN(value);
        if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
            return nan ? '' : value;
        }
        return parseFloat(parseFloat(value).toFixed(this.decimalPrecision));
    },

    initEvents : function() {
        var allowed = this.baseChars+'';
        var pressAllowed = this.baseChars+'';
        if (this.moneyCharactor != '') {
            allowed += this.moneyCharactor;
        }
        if (this.moneyFormatter != '') {
            allowed += ',:';
        }
        if(this.allowDecimals){
            allowed += this.decimalSeparator;
            pressAllowed += this.decimalSeparator;;
        }
        if(this.allowNegative){
            allowed += "-";
            pressAllowed += '-';
        }
        this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
        var keyPress = function(e){
            var k = e.getKey();
            if(!Ext.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
                return;
            }
            var c = e.getCharCode();
            if(pressAllowed.indexOf(String.fromCharCode(c)) === -1){
                e.stopEvent();
            }
        };
        this.el.on("keypress", keyPress, this);
        this.callParent(arguments);
    },

    constructor: function (config) {
        this.callParent(arguments);
    },

    getSubmitValue : function() {
        return this._submitVal == 0 ? 0 : this._submitVal;
    }
});

 使用示例：

  

                    {
                        xtype: "money",
                        name: "registrationCapital",
                        fieldLabel: "注册资本"
                    }