[Flex] Flex DataGrid 무한 페이징 처리 방법

긴 목록(list)를 보여 주는 인터페이스로 Web에서는 Paging 처리가 일반적이었지만, 목록을 구성하는 데이타의 속성에  따라서는 이 보다는 전체 목록을 자연 스럽게 스크롤링해서 볼 수 있는 인터페이스가 좀 더 편리합니다. 예를 들면, 구글 리더(Google Reader)나  네이트 메일의 편지함 등이 그렇습니다.

첫페이지가 나타나고 목록을 보다가 스크롤바를 내리면 페이징없이 자연스럽게 계속 목록의 끝까지 볼 수 있는 방식이죠. 보통은 AJAX를 통해 많이 구현하고 있습니다. 이를 Data Grid에 구현해 보면 이렇습니다.

실제 작동 방식은

- 처음 페이지가 로드되면 한 페이지 분량의 데이타를 읽어서 Data Grid의 dataProvider에 채웁니다.

- 사용자가 데이타를 더 보기 위해 스크롤 바를 내려서.. 목록의 90% 지점 이하로 내리면 다음 페이지의 데이타를 읽어서 기존 dataProvider에 추가(‘addItme’)해 줍니다.

여기서 살펴 볼 것

- DataGrid의 스크롤(‘scroll’) 이벤트 처리

- DataGrid의 dataProvider의 데이타 변경 이벤트를 멈추기
 

....
....
 

//1. DataGrid의 ‘scroll’ 이벤트 처리
//DataGrid의 스크롤바를 이동하면 ‘scroll’ 이벤트가 발생합니다.

private function scrollResult(e:ScrollEvent) : void {
    if (this._totalItemCnt > this._loadedCnt &&
        true == this.btnStartLoad.enabled &&
        ScrollEventDirection.VERTICAL == e.direction && 0 < e.delta) {

        if (0.9 * this.tblResult.maxVerticalScrollPosition < e.position)
            this.doLoad(this._loadedPageIdx + 1);
    }
}

‘scroll’ 이벤트는 수평 이동과 수직 이동이 있으며 파란색으로 표시된 라인의 direction을 통해서 이를 알 수 있습니다. delta는 스크롤 바가 이동한 거리를 나타내며, 수직 스크롤바의 경우 아래로 내리면 양수(+) 값을, 올라가면 음수(-) 값을 가집니다.

보라색으로 표시된 라인에서 e.position은 스크롤바의 thumb(마우스로 찍어서 움직일 수 있는 부분)의 위치를 가리킵니다. 실제 값은 DataGrid의 maxVerticalScrollPosition 값에 대해서 상대적입니다. 이것은 화면의 점 좌표와는 다른 것입니다.

 

2. dataProvider의 변경 이벤트 조절

DataGrid의 dataProvider로 지정된 ArrayCollection 변수는 그 내용이 변경되면 DataGrid에 반영됩니다. 한 번에 전체 목록을 변경한다면 괜찮겠지만, 기존 목록에 항목을 하나씩 추가해야 하는 경우에는 추가 싯점 마다 이벤트가 발생하므로 많은 항목을 추가하는 경우엔 문제가 됩니다.

그래서 항목을 변수에 추가하는 동안에는 DataGrid로 변경 이벤트를 보내지 않았다가, 항목 추가가 끝나는 순간에 반영하도록 조절 할 필요가 있습니다.

 

[Bindable]
private var _result:ArrayCollection;
....
....
this._result.disableAutoUpdate();
var beginIdx:uint = this._loadedCnt;
for (var i:uint = 0; i < this._pageSize; i++) {
    var listItem:Array = new Array(3);
    ....
    ....
    this._result.addItem(listItem);
}
this._result.enableAutoUpdate();

DataGrid의 dataProvider로 설정된 ArrayCollection 변수에 항목을 추가하기 전에 disableAutoUpdate()’를 호출하여 변경 이벤트를 중지 시킵니다. 모든 항목이 추가된 이후 다시 변경 이벤트를 자동적으로 발생시키도록 ‘enableAutoUpdate()’를 호출합니다.

* Example Source Code : 

endlessScroll.zip

출처 :  http://kerrigancap.truesolution.co.kr/ezboard.php?BID=study&GID=root&UID=1948&mode=view