[extJS] 입력제어

입력 자리수 제어

 maxLength : 4,
 minLength : 4,
 enforceMaxLength : true,

Ext.define('Override.form.field.VTypes', {
    override: 'Ext.form.field.VTypes',

    /**
     * 숫자와 '-'만 입력
     */
    numericDashText: "숫자와 '-'만 입력 가능합니다",
    numericDashRe: /^[0-9\-]+$/,
    numericDash: function (value) {
        return this.numericDashRe.test(value);
    },
    

});

유효성 검사

          regex : /^([0-9]{4})$/,
          regexText : '연도형식(YYYY)값만 입력 가능합니다.',

컴포넌트 속성 중 allowBlank는 기본적으론 bind 시켜서 변경 할 수 없습니다.

따라서 별도로 해당 컴포넌트를 조작해보았습니다.

dynamicAllowBlank: function(allowBlankArr, isAllowBlank){

		for(var i = 0; i < allowBlankArr.length; i++){
			if( allowBlankArr[i] ) {
				allowBlankArr[i].allowBlank = isAllowBlank;

				var newFieldLabel = isAllowBlank? allowBlankArr[i].getFieldLabel().replace('<span style="color:red">*</span>', '')
						: allowBlankArr[i].getFieldLabel() + '<span style="color:red">*</span>';
				allowBlankArr[i].setFieldLabel(newFieldLabel);

				if(isAllowBlank){
					allowBlankArr[i].clearInvalid();
				}else{
					allowBlankArr[i].validateValue(allowBlankArr[i].getValue());
				}

			}
		}
	},

첫 매개변수는 변경할 컴포넌트들이 담긴 배열,

두번째 변수는 변경을 위한 boolean 값입니다.

 1. allowBlank 속성 변경
 2. FieldLabel 변경 : 라벨 오른쪽에 붉은 별 표시
 3. clearInvalid / validateValue 변경 : 입력위치의 붉은 선