IBSheet.create 함수로 초기화시 주의해야 할 사항은 아래와 같다.


1. 시트객체 중복 문제


IBSheet.create 시 id값은 반드시 UNIQ 하게 설정해야 한다.

IBSheet.create({
    id: "sheet", // 생성할 시트의 id
});

id값이 중복으로 설정될 경우 아래와 같은 경고 메세지가 표출 된다.

[IBSheet.create({id:'sheet'})] Can't creation : Duplicate sheet_id already exists.  "sheet"


SPA(Single Page Application) 경우 또는 팝업 페이지에서 시트를 항상 새로 그려야 할때 UNIQ 하게 id를 지정 할 수 없다면 dispose 또는 disposeAll 함수로 DOM과 메모리에서 IBSheet 삭제하고 IBSheet.create를 다시 호출 하는 형태로 구현 되어야 한다.

let hasSheet = IBSheet.hasSheet("sheet"); //id 값이 sheet인 객체가 있는지 확인

if(hasSheet){ //시트객체가 있으면
    IBSheet["sheet"].dispose(); //IBSheet라는 전역변수에 모든 시트가 배열로 관리된다.
}

2. 시트를 그릴 DIV가 없을때 문제


IBSheet.create 시 el에 설정한 DIV 객체가 없거나 DIV객체가 DOM 트리를 완성 전에 create 함수를 호출하게 되면 아래 오류를 만나게 된다.

IBSheet는 el 에 해당하는 DIV에 html을 append 하는 형태로 동작하기 때문에 반드시 el에 해당하는 DIV가 랜더링이 완료된 시점에 create  함수를 호출해야 한다.

IBSheet.create({
    id: "sheet", // 생성할 시트의 id
    el: "sheetDiv" //시트를 생성할 Dom 객체 및 id
});

[IBSheet.create({id:'sheet'})] 'el' argument must be HtmlDivElement or HtmlDivElement's id .


3. 비동기 동작 문제


IBSheet.create 함수는 비동기로 동작한다.

create 함수 호출 이후 시트객체에 접근하는 로직이 있을 경우 pc 성능에 따라 동작을 보장 할 수 없다.

IBSheet.create({
    id: "sheet", // 생성할 시트의 id
    el: "sheetDiv", 
    options: opt,
});

sheet.doSearch("/search.do"); //조회 데이터가 표시 될수도 있고 안될수도 있음

객체 초기화 하자마자 시트객체에 접근하는 로직을 구현해야 한다면 반드시 onRenderFirstFinish 이벤트에서 작업하거나

IBSheet.create 함수가 동기로 동작하도록 sync를 설정 하면 된다.


[sync] - sync 예제

IBSheet.create 함수가 동기로 동작한다.

조회가 늦으면 IBSheet도 늦게 그려진다.

var opt = {
    //각 열에 대한 정의 (열의 이름, 유형(Type), 포맷(Format)등을 설정)
    Cols:[
        {Header: "이름", Name: "sa_nm", Type: "Text"},
        .....
    ]
};

//시트객체 생성
IBSheet.create({
id: "sheet", // 생성할 시트의 id
el: "sheetDiv", // 시트를 생성할 Dom 객체 및 id
options: opt, // 생성될 시트의 속성
sync: 1          //시트 생성 동기로 동작
});

sheet.doSearch("/search.do");

[async ] - onRenderFirstFinish 예제 (추천)

IBSheet.create 함수가 비동기로 동작한다.

callback 인 onRenderFirstFinish 이벤트에서 시트가 그려지고 난 이후에 처리해야 할 코드를 작성한다.

var opt = {
    //각 열에 대한 정의 (열의 이름, 유형(Type), 포맷(Format)등을 설정)
    Cols:[
        {Header: "이름", Name: "sa_nm", Type: "Text"},
        .....
    ],
    Events :{
        onRenderFirstFinish : function(evtParm) {
            //시트가 다그려진 시점에 조회를 한다.
            evtParm.sheet.doSearch("/search.do"); 
        }
    }
};

//시트객체 생성
IBSheet.create({
id: "sheet", // 생성할 시트의 id
el: "sheetDiv", // 시트를 생성할 Dom 객체 및 id
options: opt // 생성될 시트의 속성
});


4. IBSheet 관련 파일 여러번 호출시 문제


하나의 DOM에 IBSheet 관련 파일이 한번만 호출되어야 한다.(ibsheet.js, main.css 등)

아래 그림과 같이 팝업화면을  dom에 append 하여 보여지는 형태라면 팝업에서 IBSheet 관련 파일을 호출하면 안된다.