# 열(Col) 구조에 대한 이해

> 시트를 세로로 나누면 `Left`, `Center`, `Right` 영역(Section)으로 나누어 집니다.
> 각각의 영역은 고유하게 스크롤을 갖을 수 있고 각 영역 간에 이동도 가능합니다.

## 열 생성

시트 생성시 `LeftCols, Cols, RightCols` 에 각 열에 대한 기능을 정의하면 원하는 개수만큼 열을 생성할 수 있습니다.
단, SEQ 열은 항상 자동으로 생성되며 별도로 Name: "SEQ" 인 열을 설정하지 않으면 LeftCols에 Hidden 상태로 생성됩니다.
sheet.showCol('SEQ'); 로 숨겨진 `SEQ 열`을 확인 할 수 있습니다.
빈번하게 사용될 것 같은 열의 기능은 Extend를 통해 여러개 열에 동일하게 적용하실 수 있습니다.

    var options =
    {
        "Cfg": {        //전역 기능 설정(cfg property)
            "LeftCanResize": 1, "LeftWidth": 100, "RightCanResize": 1, "RightWidth": 100
        },

        LeftCols: [     //왼쪽영역(LeftSection) 고정 열 설정 (col property)
            {"Header": "NO", "Type": "Int", "Name": "SEQ", "Width": 50},
            {"Header": "선택", "Type": "Bool", "CanEdit": 1,"Name": "chk", "Width": 50},
            {"Header": "년도", "Name": "Year", "Type": "Text", "Align": "Center", "Width": 70}
        ],

        Cols: [         //가운데 영역
            {"Header": "매출", "Name": "revenue", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
            {"Header": "매출원가", "Name": "revenueOrg", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
            {"Header": "판매관리비", "Name": "salesMgr", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
            {"Header": "영업이익", "Name": "oprIncome", "Type": "Int", "Width": 120, "Format": "#,### 백만원", Formula: "revenue-revenueOrg-salesMgr", Color: "#DEDEDE"}
        ],

        RightCols: [    //오른쪽영역(RightSection) 고정 열 설정 (col property)
            {"Header": "금융손실", "Name": "finloss", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
            {"Header": "법인세", "Name": "corpTax", "Type": "Int", "Width": 120, "Format": "#,### 백만원"},
            {"Header": "순이익", "Name": "INCOME", "Type": "Int", "Width": 120, "Format": "#,### 백만원", Formula: "oprIncome-finloss-corpTax", Color: "#DEDEDE"}
        ]
    };

[`좌측,가운데,우측 영역`]

각 영역에 대한 너비는 `Cfg`에서 LeftWidth, RightWidth를 통해 설정하게 됩니다.
다만, 시트의 너비가 충분히 커서 가로스크롤바가 필요 없는 경우에는 위 설정은 무시됩니다.

영역과 영역사이는 원래 붙어 있으며, 사용자가 직접 영역의 크기를 조절할 수 있게 하려면 `Cfg`에서 LeftCanResize, RightCanResize을 설정하시면 됩니다.

## 열 기능 변경

이미 생성된 열에 대해서 설정을 확인하거나 기능을 수정하거나 추가할 수 있습니다.

    var col = sheet.Cols["finloss"];    //Name이 finloss인 열 객체 얻기

    // 열에 설정된 색상 확인
    console.log(col["Color"]);

    // 열에 속성 변경
    col["TextColor"] = "#FF0000";       //열에 색상 정의
    col["CanSelect"] = 0;               //열에 대한 선택 불가(드래그시 선택이 안됨)
    sheet.rerender();                   //변경내용 반영

다만 위와 같이 직접 열에 속성에 직접 접근하여 속성값을 변경하는 경우 시트내에서 이를 감지하지 못하여 예상치 못한 문제가 발생할 수 있으므로 가급적 getAttribute나 setAttribute 함수를 사용하실 것을 권해드립니다.

## 빈번하게 사용되는 열 유형에 대해서 Extend 기능 활용

프로젝트에서 자주 사용될 것 같은 기능을 갖은 열, 가령 "yyyy-MM-dd" 형식의 Date열이나 "$ 12.33"와 같은 통화 형식의 Float열을 공통으로 정의해 두고 각 화면에서는 미리 정의해둔 설정을 불러다 사용하실 수 있습니다.

[`ibsheet-common.js` 파일에 공통기능을 정의한 IB_Preset 이 있습니다.]

    var IB_Preset = {
      "YMD": {Type: "Date", Width: 110, Align: "Center", Format: "yyyy-MM-dd",  DataFormat: "yyyyMMdd", EditFormat: "yyyyMMdd"},
      "YM": {Type: "Date", Width: 90, Align: "Center", Format: "yyyy-MM", DataFormat: "yyyyMM", EditFormat: "yyyyMM"},
      "USD":{Type: "Float", Width: 100, Format: "$ #,###.##"},
       ....
    };

[각 페이지에서 시트 초기화 구문]

    var options = {
        Cols:[
            ///Extend를 통해 미리 정의한 Type,Format 등의 설정을 적용
            {Header: "국외수입", Name: "Income", Extend: IB_Preset.USD},
            {Header: "취득일", Name: "ICDate", Extend: IB_Preset.YMD}
        ]
    }

### Read More

- LeftWidth cfg
- RightWidth cfg
- LeftCanResize cfg
- RightCanResize cfg
- Extend col
- showCol method

### Since

product | version | desc
--- | --- | ---
core | 8.0.0.0 | 기능 추가