ibsheet8의 경우, 조회 시 다양한 경우의 작업 과정을 프로그래스 바 형태로 보여주는 SearchProgress(cfg)와 임의의 메시지를 시트 영역 가운데에 dialog 형태로 띄우는 showMessage(method) 기능을 제공하고 있습니다.


따라서 두 가지 경우의 대기이미지 변경 방법을 가이드 드립니다.



1. SearchProgress:1로 설정한 후 SearchProgress div 수정하기


SearchProgress 는 아래 이미지와 같이 데이터 조회 시 내부에서 일어나는 작업 과정을 순차적으로 프로그래스 바 형태로 보여줍니다.
해당 메시지는 메시지파일인 ko.js 에서  SearchProgessMessage, DataSearchingMessage 부분에 설정되어 있습니다.


ko.js 에서 메시지 설정 부분
"SearchProgressMessage": "<div><img  src='/common/images/loading.gif' />데이터 조회중...</div>",
                           //이미지로 표시, 배경이 투경한 이미지 제작  
"DataSearchingMessage": [  
    "",  
    "",  
    "",  
    ""
],


msg 파일(ko.js 등) 에서 위와 같이 이미지를 설정할 수 있습니다.



2. showMessage 함수를 이용하여 조회 함수 호출 전 div 띄우기


showMessage 는 아래 이미지와 같이 다이얼로그를 띄우는 기능입니다.
개별 화면에서도 설정이 가능하나, ibsheet-common.js 에서 이벤트 공통 사용코드로 사용하면 조회 대기이미지로 설정할 수 있습니다.


- ibsheet-common.js 에 아래 코드를 삽입한다.

_IBSheet.onBeforeCreate = function (obj) {
  obj.options.PageEvent = {};

    //각 페이지(화면)에서 정의한 이벤트를 따로 options.PageEvent라는 속성에 넣어 둔다.
    if( obj.options["Events"]["onSearchStart"] ){
        obj.options.PageEvent["onSearchStart"] = obj.options["Events"]["onSearchStart"];
    }

    //onBeforeDataLoad 이벤트에 대한 처리 (조회시 오류 공통 처리)
    obj.options["Events"]["onSearchStart"] = function(evtParam){

        //공통로직 처리!!!!
    evtParam.sheet.showMessage({message:"<div class='my_bg'><img src='/common/images/search.png' /></div>", importance:4, type:1});

        //개별 화면 이벤트에 대한 처리(위에 PageEvent에 담아둔 함수를 호출한다)
        if( evtParam.sheet.options.PageEvent && evtParam.sheet.options.PageEvent["onSearchStart"] ){

            //세션이 종료된게 아니라면 해당 페이지의 이벤트를 호출한다.
           evtParam.sheet.options.PageEvent["onSearchStart"](evtParam);
        }
    }
  return obj;
}

 

이미지는 임의로 my_bg 클래스를 부여했으며, 아래와 같이 div 사이즈를 이미지 너비에 맞게 설정합니다.


/*my_bg 클래스는 추가 한다.*/
.my_bg { /*div의 사이즈를 이미지의 너비에 맞게 설정 한다.*/
    width:190px;
    height:60px;
}

 

또한 main.css 파일의 padding 때문에 여백이 생기므로 IBMessage 클래스 padding을 0으로 설정합니다.

.IBMessage{white-space:nowrap;text-align:center;visibility:hidden;z-index:266;position:absolute;left:0px;top:0px;padding:0px;min-width:120px}

 

이와 같은 방법으로 원하시는 대기이미지를 설정할 수 있습니다.