마스크 편집기

텍스트와 날짜 필드의 편집기에 마스크를 적용할 수 있습니다. (숫자 필드는 editFormat 사용)

dropDown, multiLine, multiCheck, number 에디터 등에서는 동작하지 않습니다.

마스크 편집기 기본형식

"9"의 경우 공백이 허용됩니다.
입력되지 않은 경우 값에서 제외됩니다.
공백이 허용되지 않는 형식이 있는 경우 반드시 입력해야 다른셀로 이동할 수 있습니다. 기본 제공되는 마스크 패턴 문자는 아래와 같으며 필요한 경우 개발자가 직접 만드셔도 됩니다.

• "9": new RegExp("[0-9 ]")
• "0": new RegExp("[0-9]")
• "a": new RegExp("[A-Za-z]")
• "*": new RegExp("[A-Za-z0-9]")

TextCellEditor에 마스크 편집기 사용

TextCellEditor에 mask에 적용된 형식은 편집기에만 표시됩니다.
mask: "0000-0000-0000-0000" 로 입력하는 경우 입력된 형식에 맞춰 편집기가 "____-____-____-____"로 표시됩니다. 따라서 텍스트 필드의 경우 Cell에 display하기 위해서는 정규식 표현이나 displayCallback 속성을 이용해서 적절히 가공해야 합니다.

DateCellEditor에 마스크 편집기 사용

날짜 필드의 경우 editMask, datetimeFormat의 형식을 일치시켜야 하며 includedFormat:true를 이용해서 구분자까지 그대로 셀로 전달이 되어야 날짜 데이터가 정상적으로 처리됩니다.

var columns = [{
...
}, {
  "name": "OrderID",
  "fieldName": "OrderID",
  "width": "150",
  "header": {
    "text": "Card Number",
    "styleName": "orange-column"
  }, 
  "editor": {
    "mask": {
      "editMask": "0000-0000-0000-0000"
    }
  },
  "textFormat": "([0-9]{4})([0-9]{4})([0-9]{4})([0-9]{4});$1-$2-$3-$4"
}, {
  "name": "OrderDate",
  "fieldName": "OrderDate",
  "width": "130",
  "header": {
      "text": "Order Date",
      "styleName": "orange-column"
  },
  "editor": {
    "type": "date", 
    "mask": {
        "editMask": "9999-99-99", //표시되는 형식
        "placeHolder": "yyyy-MM-dd", //편집기에 표시될 형식
        "includedFormat": true //편집기에 표시된 내용이 그대로 셀값으로 전달
    }
  }, 
  "datetimeFormat":"yyyy-MM-dd"
}, {
...
}];

definitions을 사용하여 패턴문자 만들기

definitions을 사용하여 시간 입력기를 만든 데모입니다.

var columns = [
  ...
  }, {
  "name": "Time",
  "fieldName": "Time",
  "width": "150",
  "header": {
    "text": "Time",
    "styleName": "orange-column"
  }, 
  "editor": {
    "mask": {
      "definitions": {
          "b": "[0-2]",
          "c": "[0-9]",
          "d": "[0-5]",
          "e": "[0-9]"
      },
      "editMask": "bc:de",
      "includedFormat": true,                
      "overWrite": true, 
      "allowEmpty": true
    }
  },
  "textFormat": "([0-9]{2})([0-9]{2});$1:$2"
}, {
  ...
];

시간 편집기 사용시에는 24시 이상 입력되지 않도록 직접 제한은 불가능하며 아래와 같이 검증 후 값이 적용되지 않도록 처리해서 사용해주셔야 합니다.

gridView.onGetEditValue = function (grid, index, editResult) {
    if(index.fieldName == "Time"){
        var time = editResult.value.substr(0,2);
        if(Number(time) >= 24){
            editResult.value = ""
        }
    }
}