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값으로 지정해주면 됩니다.

    저작자 표시 비영리 변경 금지
    신고
    Posted by 몽고
    • 곽종연
      2017.03.17 17:54 신고

      안녕하세요.
      먼저 강좌 잘 듣고 있습니다. 항상 감사 드립니다.
      질문을 어디다가 올려야 할 지 몰라서 youtube를 보다가 블로그까지 들어오게 되었는데요.

      그리드페이징까지 잘 따라 하다가 Ext.data.BufferedStore 기능을 사용하여 보려 했는데
      여기서 막히게 되었습니다.
      undefined 오류 인데 왜 발생하는건지 알 수가 없었습니다.

      Uncaught TypeError: Cannot read property 'length' of undefined

      혹시 확인 하신다면 조그만한 힌트라도 얻길 바라며 문의 드립니다.

      • BlogIcon 몽고
        2017.03.17 18:00 신고

        그리드 height 조정해보시겠어요?

    • 곽종연
      2017.03.21 09:12 신고

      답변 주신것으로 토대로 다시 보니 height 오타가 있었습니다. heigth 로 입력 하였었네요

      bufferedStore를 사용 할 때는 이 오타의 영향으로 그리드가 표현이 안되는데
      일반 그리드의 경우에는 관계없이 표현이 되는군요. 그래서 더 찾기 어려웠었나봅니다.

      감사합니다.

      • BlogIcon 몽고
        2017.03.21 10:04 신고

        넵 버퍼는높이조정이중요한거같더군요 ㅎ


    • 2017.03.31 11:42

      비밀댓글입니다

      • BlogIcon 몽고
        2017.03.31 11:46 신고

        우왕~ 이런 장문의 댓글을 달아주시니 감사드립니다 ㅎ ㅎ ㅎ
        제가 오히려 감동 ㅎ ㅎ
        기본강좌는 끝났고...
        이제 정식적으로 서버연동이랑 조합하여 프로그램만들기를통해시 mvvm을 이해하는 관련강좌를 준비중입니다 ^^

    • 김형진
      2017.04.05 22:31 신고

      선생님~~~ 안녕하세요 ㅎㅎ
      번외적인 질문 하나만 드리구 싶은데요...

      다른 건 아니구 키보드 어떤 거 사용하시는지 좀 알 수 있을까요? ㅎㅎ;;
      자판 치는 소리가 넘 좋아서요 *^^*

      • BlogIcon 몽고
        2017.04.05 22:40 신고

        ^^;; 기초편은 HP 일반 키보드 예~~전에 컴퓨터 구매했을때 기본으로 받은 키보드로 진행했고요~
        중급강좌에서는 한성이란곳에 저렴한 기계식 키보드 구매해서 사용하고 있습니다 ㅎ

        http://mongo.tistory.com/22

        중급강좌에 사용된 제품은 위에 블로그 주소에 포스팅 해놓았습니다 ^^

    • 김형진
      2017.04.06 10:04 신고

      아~~~ 다른 용도의 블로그도 있으셨군요. 진짜 부지런 하십니다. *^^* 꼼꼼히 잘 살펴 보았는데 급지름신이... ^^;;

      • BlogIcon 몽고
        2017.04.06 10:10 신고

        ^^;; 리뷰쪽은 예~~전에 관리하고 요즘은 관리를 안하고 요즘은 ExtJS 만 하고 있네요 ㅎㅎ

    • SuN
      2017.04.06 18:09 신고

      ^^ 쉬엄 쉬엄하셔야 할 것 같아요 ㅎㅎ 글구 전 이번에 extjs 로 진행할려던 프로젝트는 아쉽게도 무산됐어요 ㅡㅡ;; 선생님 덕분으로 자신감 무한대였는데 ㅎㅎ 그래도 공부는 지속적으로 할려구요~~~ mvvm 강의두 비단 extjs 뿐만 아니라 웹 전반적인 부분에서 여러 모로 큰 도움 되구 있구요 *^^* 글구 마이크는 바꾸신 거에요? 에코가 좀 살아 있더라구요~~~ ㅎㅎㅎ

      • BlogIcon 몽고
        2017.04.06 18:13 신고

        네 마이크 바꿨습니다 ㅎㅎㅎ
        프로젝트는 아쉽네요 ㅎ 플젝진행하면서 다뤄보시먼 훨씬빨리습득하실수있으셨을텐데요 ㅎ
        강의는 그냥 시간되고 여유있을때 진행하는거라 괜찮습니다 ㅎ
        관심가져주셔서 감사합니다~ㅎㅎ