새 대화상자 추가하기

컨텍스트 메뉴에 항목을 추가하고 클릭 시 새 대화상자가 나타나도록 합니다.

1. 컨텍스트 메뉴에 항목을 추가합니다.

   // 기본 config 접근
   var config = GC.Spread.Sheets.Designer.DefaultConfig;
   
   // 컨텍스트 메뉴에 항목 추가
   if (config && config.contextMenu) {
   	config.contextMenu.unshift("insertSignatureMenu");
   }
   
   // 새 컨텍스트 메뉴 항목에 대한 명령 생성
   config.commandMap = {
   	"insertSignatureMenu": {
   		text: "서명 삽입",
   		commandName: "insertSignatureMenu",
   		visibleContext: "ClickViewport",	//"ClickRowHeader", "ClickColHeader", "ClickViewport"
   
   		// 실행 시 동작 입력
   		execute: () => {
   			// 아래에서 등록된 대화 상자 템플릿을 추가합니다.
   			GC.Spread.Sheets.Designer.showDialog("signature");
   		}   
   	}
   }

2. "config" 매개변수를 전달하여 디자이너 인스턴스를 초기화합니다.

   var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

   
   

3. "insertSignature" 대화 상자 템플릿을 만들고 등록합니다.

   let insertSignature = {
   	templateName: "insertSignature",
   	title: "서명 대화상자",
   	content: 
   	[
   		{
   			type: "FlexContainer",
   			children: [
   				{
   					type: "TextBlock",
   					margin: "5px -4px",
   					text: "삽입 범위"
   				},
   				{
   					type: "RangeSelect",
   					title: "선택 범위",
   					absoluteReference: true,
   					needSheetName: false,
   					margin: "5px -5px"
   				}
   			]
   		},
   	]
   }
   // registerTemplate을 사용하여 대화 상자 템플릿 인스턴스를 등록합니다.
   GC.Spread.Sheets.Designer.registerTemplate("signature", insertSignature);

   
   
   

대화 상자 닫기

Designer.closeDialog 메서드를 사용하여 프로그래밍 방식으로 대화 상자를 닫을 수 있습니다 .

• 위 1번 단계의 execute 함수를 수정합니다.

  // 새 컨텍스트 메뉴 항목에 대한 명령 생성
  config.commandMap = {
  	"insertSignatureMenu": {
  		text: "서명 삽입",
  		commandName: "insertSignatureMenu",
  		visibleContext: "ClickViewport",	//"ClickRowHeader", "ClickColHeader", "ClickViewport"
  
  		// 실행 시 동작 입력
  		execute: () => {
  			// 아래에서 등록된 대화 상자 템플릿을 추가합니다.
  			GC.Spread.Sheets.Designer.showDialog("signature");
  
  			// 대화 상자를 닫기 위한 실행 코드 추가
  			var showTips = document.querySelector(".show-tips");
  			var i = 4;
  			
  			var showTipsInterval = setInterval(() => {
  				showTips.innerText = i + "초 후 창이 닫힙니다.";
  				i--;
  				if (i === -1) {
  					clearInterval(showTipsInterval);
  					GC.Spread.Sheets.Designer.closeDialog("signature", false); // 시간이 지나면 대화 상자를 닫음
  				}
  			}, 1000);
  		}   
  	}
  }
  
  var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

• 위 3번 단계의 대화 상자 템플릿에 새로운 텍스트 블록을 추가합니다.

  let insertSignature = {
  	templateName: "insertSignature",
  	title: "서명 대화상자",
  	content: 
  	[
  		{
  			type: "FlexContainer",
  			children: [
  				{
  					type: "TextBlock",
  					margin: "5px -4px",
  					text: "삽입 범위"
  				},
  				{
  					type: "RangeSelect",
  					title: "선택 범위",
  					absoluteReference: true,
  					needSheetName: false,
  					margin: "5px -5px"
  				}
  			]
  		},
  		// 대화 상자 템플릿에 새 텍스트 블록 추가
  		{
  			type: "TextBlock",
  			text: "5초 후 창이 닫힙니다.",
  			className: "show-tips"
  		},
  	]
  }
  
  // registerTemplate을 사용하여 대화 상자 템플릿 인스턴스를 등록합니다.
  GC.Spread.Sheets.Designer.registerTemplate("signature", insertSignature);