sample - Paging Grid

<#ftl encoding="utf-8">
<#--
File Name : indexPagingGrid.ftl
Sub-System  Name : GRID 목록조회
Description : GRID 목록조회
최종작성일 : 2012.10.11
최종작성자: 윤혁신
-->
<script language="javascript" type="text/javascript">

var mainJsonStore; // 목록조회 Json Store
var mainGrid; // 목록조회 Grid
var pagesize = 5; // 1페이지에 보여줄 목록 개수

Ext.onReady(function(){

// 1페이지에 보여줄 목록 개수
$('#page_limit').val(pagesize);

  // 1. 데이터 모델 정의 JSON 데이터
  Ext.define('MainJsonList', {
       extend: 'Ext.data.Model',
       fields: [
{name: 'cust_id',  mapping: 'cust_id'},
{name: 'cust_nm',  mapping: 'cust_nm'},
{name: 'cpy_telno',  mapping: 'cpy_telno'},
{name: 'email',  mapping: 'email'},
{name: 'money',  mapping: 'money'},
{name: 'reg_dt',  mapping: 'reg_dt'}      
       ]
   });

   // 2. Store 정의
   mainJsonStore = Ext.create('Ext.data.Store', {
       pageSize: $('#page_limit').val(), // paging
       model: 'MainJsonList', // 선언한 모델 정의..
       remoteSort: true,
       proxy: {
           type: 'ajax',
           url: '<@spring.url "/sample/grid/listGridSamplePrc.do" />',
           headers: { 'Accept': 'application/json' },
           reader: {          
               root: 'listGridSample', // JSON 데이터의 ROOT
               totalProperty: 'totalCount'
           }
       }
   });

   // 3. 리스트 그리드
mainGrid = Ext.create('Ext.grid.Panel', {
      id : 'main_grid',
       width: '100%',
       //height : 173,
       store: mainJsonStore,
columnLines: true,
disableSelection: false,
       loadMask: true,
       viewConfig: {
           trackOver: true,
           stripeRows: true,
           forceFit: true
       },
       // grid columns
       columns:[
{
header : 'cust_id',
dataIndex : 'cust_id',
hidden : true
}, {
header : "고객명",  
dataIndex : 'cust_nm',
width : 80,
align : 'center',
   sortable : true
}, {
header : "전화",
dataIndex : 'cpy_telno',
width : 110,
   sortable : true
}, {
header : "메일",
dataIndex : 'email',
flex : 1,
   sortable : true    
}, {
header : "보유자산",
dataIndex : 'money',
align : 'right',
width : 90,
   sortable : true    
}, {
header : "등록일",
dataIndex : 'reg_dt',
align : 'center',
width : 80,
   sortable : true
}
       ],
       // 페이징 BAR
       bbar: Ext.create('Ext.PagingToolbar', {
           store: mainJsonStore,
           displayInfo: true,
           displayMsg: '전체게시물 : {2} 개', // {0} : 현재 페이지 , {1} : 목록 개수 (1페이지에서 보일 목록 개수),  {2} : 전체 개수
           emptyMsg: "데이터가 존재하지 않습니다."
         
   }),
       renderTo: 'div_mainlist_grid' // 그리드에 매핑하는 DOM 객체 (DIV 태그)
   });
 
   //목록조회 Grid load
   fncGoSearch();

     // 목록 Grid size reload
$(window).resize(function () {
var width = $(window).width();
mainGrid.setWidth(width - 55);
});
 
}) // Ext.onready End

/**
* Function Name : fncGoSearch()
* Description : 조회 및 검색
*/
function fncGoSearch() {
mainJsonStore.load({
            params:{ },
            callback: function () {
                var count = mainGrid.getStore().getTotalCount();
                window.onload =fncIframeResizeGrid(count);
            }
        });
}

</script>

<!-- 설명-->
<div>
- GRID에서 Paging 을 표현한다.<br>
- pageSize로 한 페이지에 보여줄 목록 개수를 선언한다.<br>
- 'Ext.PagingToolbar'로 전체게시물, 현재 페이지 , 목록 개수, 전체 개수를 표현한다.<br>
<br>
</div>
<!-- //설명 -->

    <!-- 리스트 테이블 시작 -->
    <input type="hidden" name="page_limit" id="page_limit">
    <div class="grid_box mt5">
<div id="div_mainlist_grid"></div> <!-- 그리드가 매핑되는 영역 -->  
</div>