sample - Sliding Grid

- GRID에서 Paging을 progress bar 형태로 표현한다.<br>
- 'Ext.ux.SlidingPager' plugins을 사용한다.

<#ftl encoding="utf-8">

<#--

File Name : indexSlidingGrid.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: 600,

         //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,

             plugins: Ext.create('Ext.ux.SlidingPager', {})

           

      }),

         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을 progress bar 형태로 표현한다.<br>

  - 'Ext.ux.SlidingPager' plugins을 사용한다.<br>

  <br>

 </div>




 <!-- 리스트 테이블 시작 -->

    <input type="hidden" name="page_limit" id="page_limit">

    <div class="grid_box mt5">

  <div id="div_mainlist_grid"></div> <!-- 그리드가 매핑되는 영역 -->    

 </div>