# 상태 표시줄 

## Content

SpreadJS는 워크시트 하단에 표시되는 상태 표시줄(Status Bar)을 제공합니다. 상태 표시줄에는 현재 셀 모드, 평균, 개수, 숫자 개수, 최소값, 최대값, 선택한 셀의 합계, 확대/축소 슬라이더 및 확대/축소 비율 정보가 표시됩니다.
아래 표에는 상태 표시줄에서 사용할 수 있는 모든 옵션과 각 옵션에 대한 간단한 설명이 정리되어 있습니다.

| **옵션** | **설명** |
| --- | --- |
| **Cell Mode** | 선택된 셀의 현재 셀 모드를 표시합니다. |
| **Average** | 숫자 값을 포함하는 선택된 셀들의 평균값을 표시합니다. |
| **Count** | 선택된 셀의 총 개수를 표시합니다. |
| **Numerical Count** | 숫자 값을 포함하는 선택된 셀의 개수를 표시합니다. |
| **Minimum** | 선택된 셀 중 숫자 값의 최소값을 표시합니다. |
| **Maximum** | 선택된 셀 중 숫자 값의 최대값을 표시합니다. |
| **Sum** | 선택된 셀 중 숫자 값의 총합을 표시합니다. |
| **Zoom Slider** | 확대/축소를 위한 플러스(+) 및 마이너스(-) 버튼이 있는 슬라이더를 표시합니다. |
| **Zoom (100%)** | 현재 줌 비율을 표시합니다. 줌 퍼센트를 클릭하면 추가 확대 설정이 가능한 대화 상자가 표시됩니다. |

>type=note
> **참고:** 점진적 계산 동작 및 진행 상태 보고에 대한 자세한 설명은 [점진적 계산](/spreadjs/docs/features/formulas/incremental-calculations) 항목을 참고하세요.

상태 표시줄은 아래의 **6가지 테마**뿐 아니라 SpreadJS **워크북 테마**도 지원합니다:

1. Spread JS
2. Excel 2013 White
3. Excel 2013 Light Gray
4. Excel 2013 Dark Gray
5. Excel 2016 Colorful
6. Excel 2016 Dark Gray

## 상태 표시줄 표시

다음 코드를 참고하여 워크시트에 **상태 표시줄(Status Bar)** 을 표시할 수 있습니다:

```auto
// 상태 표시줄 생성, 호스트에 추가하고, 컨텍스트 내에서 바인딩
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);
```

아래 이미지와 같이, **사용자 정의 옵션(예: Span test)** 을 추가하여 **상태 표시줄을 커스터마이징**할 수도 있습니다.![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/status-3.png)
상태 표시줄을 **마우스 오른쪽 버튼으로 클릭**하면 **상태 표시줄 컨텍스트 메뉴**가 나타납니다.
해당 메뉴에서 아래 이미지와 같이, **사용자 정의 옵션(예: 현재 병합 - Span test)** 이 **기본 옵션 목록에 추가된 것**을 확인할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/status-4.png)

## 상태 표시줄 사용자 정의

워크시트에서 상태 표시줄을 사용자 정의하려면 아래 코드를 참고하시기 바랍니다

```auto
// GC.Spread.Sheets.StatusBar.StatusItem 통해 상태 항목 사용자 정의
var spanItem = new GC.Spread.Sheets.StatusBar.StatusItem("spanItem", {
  menuContent: "Current span",
  value: "Span test",
});
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
  document.getElementById("statusBar"),
  { items: [spanItem] }
);
statusBar.bind(spread);

// gc.spread.sheets.statusbar.statusitem 확장하여 상태 항목 사용자 정의
var statusbar = new gc.spread.sheets.statusbar.statusbar(
  document.getelementbyid("statusbar")
);
statusbar.bind(spread);
var statusitem = gc.spread.sheets.statusbar.statusitem;
function labelitem(name, options) {
  statusitem.call(this, name, options);
}
labelitem.prototype = new statusitem();
labelitem.prototype.oncreateitemview = function (container) {
  var item = document.createelement("div");
  item.innertext = this.value;
  item.style.background = "blue";
  container.addeventlistener("click", function (e) {
    //클릭 
  });
  container.appendchild(item);
};
labelitem.prototype.onupdate = function () {
  // 컨텍스트 메뉴 항목 체크가 변할 때 동작 
};
statusbar.add(
  new labelitem("labelitem", {
    menucontent: "test label",
    value: "test option",
  })
);
```

## 상태 표시줄 제거

워크시트에서 상태 표시줄을 제거하려면 아래 코드를 참고하시기 바랍니다.

```auto
// 상태 표시줄 삭제 
statusBar.dispose();
```