Menu (appendix)

마우스 우측 버튼 클릭 시 보여지는 컨텍스트 메뉴를 설정합니다.
항목을 구분자로 나열한 문자열(ex: "|저장|취소|미리보기")로 간단히 만들거나, 체크박스, 버튼, 트리 등 복잡한 구조가 필요하면 **객체(object)**로 설정합니다.
이 문서는 객체(object) 메뉴 설정을 다룹니다. 간단한 문자열 메뉴는 각 영역의 Menu 속성 문서(Cfg / Col / Row / Cell)를 참고하세요.

Menu 속성

Menu 객체는 메뉴 전체에 적용하는 속성(Items, Buttons 등)과, Items에 담기는 각 항목(Item)에 적용하는 속성(Name, Bool, Value 등)으로 구성됩니다. 아래에서 각각 다룹니다.

1. 메뉴 전체에 적용하는 속성

2. 각 항목(Item)에 적용하는 속성

위 속성을 사용한 체크박스형 메뉴 예입니다. 아이템에 Bool:1을 주면 체크박스가 표시되어 여러 항목을 동시에 선택할 수 있고, Value는 초기 체크 상태(1=체크, 0=해제)입니다. Ok를 누르면 OnSave의 data에 체크된 항목 이름 배열이 전달됩니다.

  {
    "Menu":{
      "Buttons":[ "Ok", "Cancel" ],
      "Items":[
        {"Name":"미국","Value":1,"Bool":1},
        {"Name":"일본","Value":0,"Bool":1},
        {"Name":"중국","Value":0,"Bool":1},
        {"Name":"북한","Value":1,"Bool":1}
      ],
      "OnSave":function(item,data) {
        // this.Sheet / this.Row / this.Col 로 메뉴가 열린 위치 접근 가능
        alert("["+data.join(",")+"]를 선택하셨습니다.");
      }
    }
  }

---

Menu 이벤트

전역으로 발생하는 onShowMenu나 onSelectMenu 이벤트 외에 메뉴별로 각각 이벤트를 설정할 수 있습니다. 메뉴에 설정되는 이벤트도 속성과 마찬가지로 전역 이벤트와 특정 아이템에 설정하는 이벤트로 나뉩니다.

이벤트 콜백 안에서 this(메뉴 또는 아이템 객체)를 사용하려면, 화살표 함수 대신 일반 함수(function(){})로 작성하세요. 화살표 함수는 this가 바뀝니다.

1. 메뉴 전체 이벤트

OnSave

메뉴에서 선택을 확정했을 때 발생합니다. (메뉴가 닫힌 뒤 발생)

• 항목을 바로 클릭하면 결과가 item 으로 넘어옵니다.
• 체크박스(Bool)나 편집(Edit)을 쓰고 하단 Ok 버튼(Buttons에 "Ok" 지정)을 누르면 결과가 data 로 넘어옵니다.

this는 메뉴 객체라 this.Sheet / this.Row / this.Col로 메뉴가 열린 시트, 행, 열에 접근할 수 있습니다.

일반 항목을 클릭하면 전역 onSelectMenu 이벤트도 함께 발생하므로, 둘 중 하나에서만 처리하세요. (onSelectMenu 참고)

OnButton

하단 버튼을 클릭할 때 발생합니다. (OnSave보다 먼저 발생하며, false를 리턴하면 이후 처리를 막습니다.)

this는 메뉴 객체라 this.Sheet / this.Row / this.Col로 메뉴가 열린 시트, 행, 열에 접근할 수 있습니다.

Menu: {
  Buttons: ["Ok", "Clear", "Cancel"],
  Items: [ { Name: "월요일", Bool: 1 }, { Name: "화요일", Bool: 1 } ],
  OnButton: function (button) {
    // button 값: "Ok" / "Cancel" / "All"(전체선택) / "Clear"(전체해제)
    if (button === "Ok") {
      // 확인 버튼 후처리 ...
    }
    // 필요 시 false를 리턴하면 해당 버튼의 기본 후처리를 막습니다.
  }
}

2. 아이템 개별 이벤트

OnClick

특정 아이템을 클릭할 때 발생합니다. 리턴값으로 이후 동작을 제어합니다.

• false : 기본 동작을 실행하지 않고 메뉴를 계속 엽니다.
• true : 기본 동작을 실행하지 않고 메뉴를 닫습니다.
• null (또는 리턴 없음) : 기본 동작(아이템 선택)을 실행합니다.

this는 클릭한 아이템입니다. this.Name으로 이름, this.Owner로 메뉴 객체, this.Parent로 부모 아이템이나 메뉴에 접근합니다. 메뉴가 열린 시트, 행, 열은 this.Owner.Sheet / this.Owner.Row / this.Owner.Col로 접근할 수 있습니다.

Menu: {
  Items: [
    { Name: "새로고침",
      OnClick: function (menu, item) {   // this = 클릭한 아이템
        var sheet = this.Owner.Sheet;
        var row   = this.Owner.Row;      // 메뉴가 열린 행
        // ... row/sheet 로 원하는 처리 ...
        return true;   // 기본 동작 없이 메뉴 닫기 (false=계속 열림, null=기본 선택)
      }
    }
  ]
}

OnChanged

수정 가능한 아이템(Bool, Enum, Edit)의 값이 바뀔 때, 값이 적용되기 전에 발생합니다.

this는 해당 아이템입니다. this.Value는 변경 전 값, this.Name은 이름이며, 메뉴가 열린 시트, 행, 열은 this.Owner.Sheet / this.Owner.Row / this.Owner.Col로 접근합니다. 새 값을 적용하려면 그 값을 리턴하고, 변경을 취소하려면 this.Value(이전 값)를 리턴합니다.

Menu: {
  Items: [
    { Name: "사용여부", Bool: 1, Value: 0,
      OnChanged: function (value) {   // this = 해당 아이템, value = 변경될 새 값
        // this.Value = 변경 전 값
        return value;   // 새 값 적용 (변경을 취소하려면 this.Value 리턴)
      }
    }
  ]
}

---

Example

{
  Menu:{
    Buttons:["Ok","Cancel"],
    Items:[
      {
      Menu:1,
      Name:"과일",
        Items:[
          {Name:"과일이름",Caption:1},
          {Name:"사과",Bool:1},
          {Name:"배",Bool:1},
          {Name:"오렌지",Bool:1}
        ]
      },
      {
        Enum:1,
        Name:"채소",
        Items:[
          {Name:"당근"},
          {Name:"오이"},
          {Name:"가지"},
          {Name:"토마토"}
        ]
      },
      {
        Level:1,
        Expanded:1,
        Default:{OnClick:ItemClickHandler},
        Name:"나물",
        Items:[
          {Name:"도라지"},
          {Name:"더덕"},
          {Name:"미나리"}
        ]
      }
    ],
    OnButton:function(button){
      if(button == "Cancel"){
        if(!confirm("정말로 취소하시겠습니까?")){
          return false;
        }
      }
    }
  }
}

Read More

• Menu row
• EnumMenu col
• Menu col
• Menu cell
• onSelectMenu event
• onShowMenu event
• showMenu static

Since