[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

상태를 사용하여 레이아웃 설정하기

SpreadJS 디자이너 컴포넌트는 특정 레이아웃을 표시하기 위해 명령 옵션에 정의할 수 있는 다양한 상태를 제공합니다.

  • inDropdown: 명령이 드롭다운에 있음을 나타냅니다.

    isToolbarMode: 툴바 리본 모드를 나타냅니다.

designer.setData 메서드를 사용하여 사용자 지정 상태를 추가할 수 있습니다.


위 상태들은 IF, AND, NOT 같은 수식 표현식을 사용해 명령 옵션에 정의할 수 있습니다. 다음 코드 구문은 "text"와 "bigButton" 명령 옵션에서 다양한 수식 표현식을 사용해 상태를 설정하는 예시입니다:


명령이 드롭다운에 없고 리본이 툴바 모드가 아닐 때 bigButton 옵션을 true로 설정합니다.

  • text: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")'


툴바 리본 모드일 때는 text를 "Toolbar Ribbon"으로 설정하고, 그렇지 않으면 "Default Ribbon"으로 설정합니다.

  • bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))'


    명령이 드롭다운에 없고 리본이 툴바 모드가 아닐 때 bigButton 옵션을 true로 설정합니다.

참고: commandName 옵션은 수식 표현식을 지원하지 않습니다.

예시

아래 이미지는 기본 리본 모드와 툴바 리본 모드 각각에서 명령어 텍스트와 아이콘이 어떻게 다른지 보여줍니다.




다음 코드 샘플은 위 이미지에 표시된 명령 옵션에서 config 상태를 설정하는 방법을 보여줍니다.

// "Welcome" 명령 정의
var command = {
    title: "Welcome",
    text: '=IF(isToolbarMode,"툴바 리본","기본 리본")',
    iconClass: '=IF(inDropdown, "ribbon-button-sjs","ribbon-button-hi")',
    bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))',
    direction: '=IF(isToolbarMode, "horizontal","vertical")',
    visiblePriority: 1000,
    commandName: "Welcome",
    execute: async (context, propertyName, fontItalicChecked) => {
        alert('새 디자이너에 오신 것을 환영합니다.');
    }
};

// 기본 설정의 명령 맵에 명령 추가
window.customRibbonConfig = GC.Spread.Sheets.Designer.DefaultConfig;
        
customRibbonConfig.commandMap = {
    Welcome: command
}
        
// 기본 리본에 버튼 추가
customRibbonConfig.ribbon[0].buttonGroups.unshift({
    "label": "New Button",
    "thumbnailClass": "welcome",
    "commandGroup": {
        "children": [
            {
                "direction": "vertical",
                "commands": [
                    "Welcome"
                ]
            }
        ]
    }
});
customRibbonConfig.ribbon[0].buttonGroups[2].commandGroup.children[0].children.push('Welcome');

// 툴바 설정의 명령 맵에 명령 추가
window.customToolbarConfig = GC.Spread.Sheets.Designer.ToolBarModeConfig;
customToolbarConfig.commandMap = {
    Welcome: command
}

// 툴바 리본에 버튼 추가
customToolbarConfig.ribbon.panels[0].buttonGroups.unshift({
    "buttonGroupName": "Welcome",
    "commandGroup": {
        "children": [
            "Welcome"
        ]
    }
});

// 기본 리본 모드로 디자이너 컴포넌트 초기화
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer_host"));
designer.setConfig(customRibbonConfig);
        
// 기본 리본과 툴바 리본 모드 전환 버튼 설정
document.getElementById('switch').addEventListener('click', function () {
    designer.setConfig(designer.getData('isToolbarMode') ? customRibbonConfig : customToolbarConfig)
});