1.可自已设置金额正、负是分别用绿、红色表字体;
2.显示带币种符号,提交时不会为数值提交;
3.extjs 5.10测试
/** * extjs form money field. * * * @author <a href='mailto:[email protected]'>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: "注册资本" }