在做一个项目前台输入框是金额类型,要求长度为20位,并且有两位小数点.
想要的效果是输入后变成:123.456.00
当鼠标放上去复制时变成:123456
代码如下:
Ext.ux.MoneyField = Ext.extend(Ext.form.NumberField, {
selectOnFocus : true,
maxLen:null,
// maxLengthText:null,
style : {
"text-align":"right"
},
onRender : function(ct, position){
if(!Ext.isDefined(this.submitValue)){
this.submitValue = false;
}
Ext.ux.MoneyField.superclass.onRender.call(this, ct, position);
this.el.dom.removeAttribute('name');
if(this.name){
this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.name,
id: (this.hiddenId || Ext.id()),cpnid:this.id}, 'before', true);
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
}
},
initValue : function(){
//根据maxLen给maxLength赋值
if(this.maxLen!=null){
//长度为maxLen的数值格式转化后含有几个分隔符
var str="";
for(var i=1;i<=this.maxLen;i++){
str=str+""+1;
}
str = parseFloat(str);
str = Ext.util.Format.number(str,"0,000,000");
this.maxLength=str.length;
}
//console.log("$$$$$"+this.maxLength);
Ext.ux.MoneyField.superclass.initValue.call(this);
if(this.hiddenField){
this.hiddenField.value =
Ext.value(Ext.isDefined(this.hiddenValue) ? this.hiddenValue : this.value, '');
}
},
onDestroy : function(){
Ext.destroyMembers(this, 'hiddenField');
Ext.ux.MoneyField.superclass.onDestroy.call(this);
},
/**
* Runs all of NumberFields validations and returns an array of any errors. Note that this first
* runs TextField's validations, so the returned array is an amalgamation of all field errors.
* The additional validations run test that the value is a number, and that it is within the
* configured min and max values.
* @param {Mixed} value The value to get errors for (defaults to the current field value)
* @return {Array} All validation errors for this field
*/
getErrors: function(value) {
var errors = Ext.form.NumberField.superclass.getErrors.apply(this, arguments);
value = Ext.isDefined(value) ? value : this.processValue(this.getRawValue());
if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
return errors;
}
value = String(value).replace(/,/g, "").replace(this.decimalSeparator, ".");
if(isNaN(value)){
errors.push(String.format(this.nanText, value));
}
var num = this.parseValue(value);
if (num < this.minValue) {
errors.push(String.format(this.minText, this.minValue));
}
if (num > this.maxValue) {
errors.push(String.format(this.maxText, this.maxValue));
}
return errors;
},
parseValue : function(value) {
value = parseFloat(String(value).replace(this.decimalSeparator, ".").replace(/,/g, ""));
return isNaN(value) ? '' : value;
},
getValue : function() {
return this.fixPrecision(this.parseValue(Ext.ux.MoneyField.superclass.getValue.call(this)));
},
setValue : function(v) {
if(Ext.isEmpty(v)){
v = "0.00";
}
if(Ext.isString(v)){
v = parseFloat(v);
}
v = Ext.util.Format.number(v,"0,000,000");
this.value = v;
if(this.hiddenField){
this.hiddenField.value = v.replace(/,/g,"");
}
return Ext.form.NumberField.superclass.setValue.call(this, v);
},
preFocus : function(){
var el = this.el,
isEmpty;
if(this.emptyText){
if(el.dom.value == this.emptyText){
this.setRawValue('');
isEmpty = true;
}
el.removeClass(this.emptyClass);
}
if(this.selectOnFocus || isEmpty){
// el.dom.value = this.hiddenField.value.replace(/,/g,"");
// el.dom.select();
el.dom.value = this.hiddenField.value.replace(/,/g,".");
}
}
});
Ext.reg('moneyfield', Ext.ux.MoneyField);
使用方法,如长度为20
-xtype:’moneyfiled’;
-maxLen:20;
-maxLength:20;