ExtJS6 열여섯번째강의 - ExtJS 6 그리드 페이징 및 버퍼스토어 적용하기(ExtJS 6 Applying grid paging and buffered store )

▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼

https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ

페이징을 위한 서버 및 기본적인 ExtJS 관련부분 설명

- Server

1. 기본적으로 "start"와 "limit" 라는 키를 이용하여 서버에 페이징 관련 값을 전달

   ※ MySQL/MariaDB의 경우는 받아서 LIMIT 부분에 정의만 하면 되지만, 

      MSSQL 또는 Oracle등 기타 DBMS에서 페이징 쿼리 작성 시, 

      별도로 계산하여 페이징 처리를 해주어야함

2. 일반적인 게시판 페이징과 동일하게 특정 리스트에 대한 전체카운트 쿼리 1개와 

   start,limit로 특정 페이지만 출력한 리스트쿼리 1개 

   이렇게해서 2개의 값을 응답값 API로 각각 넘겨주어야함

- Client

1. 데이터 스토어 속성의 pageSize라는 속성이 있는데, default 25개의 목록을 호출

    한페이지 당 보여줄 목록수를 조정하고 싶다면, pageSize config 속성을 정의

2. 기존에는 "pagingtoolbar" 컴포넌트에 그리드와 동일한 데이터스토어를 

   정의해주었으나, 별도로 선언하지 않아도 되는것 같음

3. 프로그래스바 페이징, 슬라이더 페이징과 같은 UX 관련 플러그인을 이용하기 

   위해서는 app.json에서 requires부분을 검색 후, "ux" 를 추가 후, 빌드를 해준 후,

   사용하면 됨

4. 데이터스토어의 reader 의 config 속성 중, rootProperty 만을 이용했었지만, 

   페이징을 위해서는 totalProperty라는 속성을 추가로 정의해주어야 합니다. 

   선언을 안할 경우, default "total"이라는 key로  List Count를 찾습니다.

   ※ 즉, rootProperty + totalProperty의 선언된 key는 서버에서도 동일하게 

      정의해주어야 합니다.

버퍼스토어 (Ext.data.BufferedStore)

버퍼스토어 클래스는 데이터 스토어와 동일하게 페이징처리가 가능합니다.

다만, 버퍼스토어의 경우는 그리드에서 스크롤을 이용한 페이징 처리를 하고자 할때 이용됩니다.

기존 그리드 STORE 속성에서 CONFIG 설정 시, 기본적으로 Ext.data.Store를 호출하므로 버퍼스토어를 이용할 경우, Ext.create 를 이용하여 Ext.data.BufferedStore를 

선언 후, 변수에 담아주고, 해당 변수를 store 속성의 value값으로 지정해주면 됩니다.