자바스크립트/Ext JS2011. 8. 7. 21:20
그리드는 일반적으로 웹에서 표현될 때 페이징이 되어 보여진다. 그러나 웹인데도 불구하고 대량에 데이터를 보여줘야할
경우가 있다. 일단 2천~3천건 정도를 보여줘야할 경우가 있는데 페이징을 고객이 꺼려한다.
출력은 되지만 천건 이상 출력될 경우 화면 전환이나 이동, 리사이징 등이 당연히 느려질 수 밖에 없다.
그래서 infinite scroll(무한 스크롤을 사용하기로 했다.)
근데 이놈이 문제가 좀 있다. 샘플을 그대로 사용하기에는 문제가있었다. 검색 버튼을 클릭하고 2번째 검색을 다시 했을 경우
스크롤이 정상적인 위치에 있지 않고 그리드내의 페이지 위치와 스크롤 위치가 어긋나는 현상이 발생한다.

이걸 어떻게 맞춰줄 까 싶어 구글링 해보니 방법을 찾았다. 아래의 글을 참고해서 override한 클래스를 이용하면
http://www.sencha.com/forum/showthread.php?133337-desire-to-reload-the-buffered-scrolling-example-with-different-data-via-user-action&p=602983

재 검색시 스크롤 바를 맨 위로 맞춰주게 된다. 더 구체적으로 쓰고 싶지만 나중에 정리하자.




위의 그림을 보면 스크롤을 계속하면 페이지별로 서버에 요청하는 것을 볼 수 있다. 근데 단점은 전체 데이터를 모두 가지고 있으면
로컬 소팅이나 로컬 검색이 가능하지만 이 경우에는 컬럼을 클릭해서 소팅을 다시 할 경우 로컬 소트가 아닌 리모트 소트를 적용
해서 다시 데이터를 원천적으로 해야한 다는 건데..
암튼 이런 형태로 구현하면 눈속임이지만 수만건의 데이터도 보여지게 할 수 있다.

'자바스크립트 > Ext JS' 카테고리의 다른 글

Extjs AutoID  (0) 2011.08.13
store에 object 삽입  (0) 2011.08.10
Event Observer  (0) 2011.07.17
property.Grid에 사용자 콤보 추가.  (2) 2011.07.06
reconfigure  (0) 2011.07.06
Posted by 베니94