Extjs NumberField 수정

기본적으로 Extjs의 NumberField를 사용하게 되면 숫자형식을 벋어난 값은 입력 받을 수 없게 만들어 준다.

허용된 값들은 0-9 . - 이다.

여기서는 좀더 효과적인 NumberField 를 사용하기 위해 몇가지를 수정 했다.

1. onkeyup를 통해서 숫자값 확인
2. 숫자에 콤마 붙이기
3. 음수 확인
4. 소숫점 확인

Ext.onReady(function() {
ChageTextFieldToNumberField("textTest"); //이벤트에 적용할 필드명
//값이 여러개 일경우
//ChageTextFieldToNumberField("id1","id2","id3");
});

function toNumber(v) {
	var val;
	var n = (String(v).replace(/[^\d.]/g, ""));
	if (n.indexOf('.') >= 0) {
		val = Number(String(n.split('.')[0]).replace(/[^\d]/g, "")).toLocaleString().slice(0, -3)
			+ "." + 
			String(n.split('.')[1].replace(/[^\d]/g, ""));
	}
	else {
		val = Number(String(n).replace(/[^\d]/g, "")).toLocaleString().slice(0, -3);
	}
	//음수처리
	if (v.indexOf('-') >= 0) {
		val = "-" + val;
	}
	return val;
}
function onKeyUp_Event(field, e) {
	var v = field.getRawValue();
	field.setRawValue(toNumber(v));            
}
function ChageTextFieldToNumberField(){
	for(var i = 0 ; i < arguments.length ; i++)
	{
		var textField = arguments[i];
		if(document.getElementById(textField) != undefined)
		{
			var targetInput = document.getElementById(textField);

			var number = new Ext.form.NumberField({
				applyTo: targetInput,
				id: targetInput.id,
				allowBlank: true,
				allowNegative: true,
				selectOnFocus: true,
				enableKeyEvents: true,
				listeners: {
					scope: this,
					keyup: onKeyUp_Event
				}
			});
		}//end if
	}//end loop
} //end funtion


//Ext.form.NumberField 오버라이드를 통해 기본 메서드 변경
Ext.override(
	Ext.form.NumberField, {
		setValue: function(v) {
			v = v.replace(/,/g, "");//추가
			v = typeof v == 'number' ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
			v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);

			v = toNumber(v);//추가
			return Ext.form.NumberField.superclass.setValue.call(this, v);
		},
		validateValue: function(value) {
			value = value.replace(/,/g, "");//추가

			if (!Ext.form.NumberField.superclass.validateValue.call(this, value)) {
				return false;
			}
			if (value.length < 1) {
				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;
		},
		beforeBlur: function() {
			//내용수정
			this.setValue(this.getRawValue());
		}
	}
);

...

...

TIP.
DB에 저장 해야하는 값중 소숫점의 제한이 있는 경우, 예를 들자면 ORACLE에서 NUMBER(10,2)인 경우 아래 처럼 소스를 추가하자

function toPrecisionNumber(v, scale, precision) {
        if (scale < precision) {
            throw "scale과 precision값을 확인 해주세요. (scale-precision=은 음수가 될수 없음_";
        }
        var val;
        var n = (String(v).replace(/[^\d.]/g, ""));
        if (n.indexOf('.') >= 0) {
            val = Number(String(n.split('.')[0]).replace(/[^\d]/g, "").substring(0, scale - precision)).toLocaleString().slice(0, -3)
                + "." +
                String(n.split('.')[1].replace(/[^\d]/g, "").substring(0, precision));
        }
        else {
            val = Number(String(n).replace(/[^\d]/g, "").substring(0, scale - precision)).toLocaleString().slice(0, -3);
        }

        //음수처리
        if (v.indexOf('-') >= 0) {
            val = "-" + val;
        }
        return val;
    }
    function onKeyUp_Event(field, e) {
        var v = field.getRawValue();
        
        //DB상의 10, 2 같은 값 처리
        var tmpValue = (String(v).replace(/[^\d.]/g, ""));
        var scale = parseInt(field.getEl().getAttribute('scale'));
        var precision = parseInt(field.getEl().getAttribute('precision'));
        
        if (scale && tmpValue.length > 3) {
            if (!precision) {
                precision = "0";
            }
            scale = parseInt(scale);
            precision = parseInt(precision);
            v = toPrecisionNumber(v, scale, precision);
        }
        field.setRawValue(toNumber(v));            
    }

...

...