Ext.define('BM.ux.MoneyFiled', {
extend:'Ext.form.NumberField',
alias: 'widget.moneyfield',
trulyValue:null,
setValue: function(v){
if(isNaN(v)){
this.setRawValue('');
this.trulyValue = null;
}else{
this.setRawValue(this.getFormatValue(v));
this.trulyValue = v;
}
},
getFormatValue:function(v){
v = typeof v == 'number' ? v : Number(v);
v = isNaN(v) ? '' : formatMoney(v);
return v;
},
getSubmitValue: function() {
return this.trulyValue;
},
onChange: function(v) {
this.toggleSpinners();
this.callParent(arguments);
this.trulyValue = this.parseValue(v);
},
validateValue: function(value){
var num = this.parseValue(value);
if (isNaN(num) && num.length > 0) {
this.markInvalid(String.format(this.nanText, value));
return false;
}
return Ext.form.NumberField.superclass.validateValue.call(this, num);
},
onBlur : function() {
this.setValue(this.trulyValue);
},
onFocus:function(){
this.setRawValue(this.trulyValue);
},
parseValue: function(value){
value = parseFloat(String(value).replace(this.decimalSeparator, ".").replace(/,/g, ""));
return isNaN(value) ? '' : value;
},
getErrors: function(value) {
return Ext.form.NumberField.superclass.getErrors.call(this,this.trulyValue);
}
});
/*将数字转换为千位符*/
function formatMoney(v) {
if(isNaN(v)){
return v;
}
v = (Math.round((v - 0) * 100)) / 100;
v = (v == Math.floor(v)) ? v + "" : ((v * 10 == Math.floor(v * 10)) ? v
+ "0" : v);
v = String(v);
var ps = v.split('.');
var whole = ps[0];
var sub = ps[1] ? '.' + ps[1] : '';
var r = /(\d+)(\d{3})/;
while (r.test(whole)) {
whole = whole.replace(r, '$1' + ',' + '$2');
}
v = whole + sub;
return v;
}
交互过程:在控件失去焦点的时候显示为千位符显示,鼠标移入变为正常数值显示。
开发过程记录:
1.重写getSubmitValue 让表单提交的时候获取的是真实的值
2.在onChange事件中动态更新 trulyValue
3.重写getErrors方法使得表单验证的时候获取的是真实的值