sample - Locking Grid

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

var mainJsonStore; // 목록조회 Json Store
var mainGrid; // 목록조회 Grid

Ext.onReady(function(){

  // 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'},
{name: 'temp'}      
       ]
   });

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

   // 3. 리스트 그리드
mainGrid = Ext.create('Ext.grid.Panel', {
      id : 'main_grid',
       width: '100%',
       height : 162,
       store: mainJsonStore,
columnLines: true,
disableSelection: false,
       loadMask: true,
       viewConfig: {
           trackOver: true,
           stripeRows: true,
           forceFit: false
       },
       // grid columns
       columns:[
{
header : 'cust_id',
dataIndex : 'cust_id',
//locked : true,
hidden : true
}, {
header : "고객명",  
dataIndex : 'cust_nm',
width : 80,
align : 'center',
locked : true,
   sortable : true
}, {
header : "전화",
dataIndex : 'cpy_telno',
width : 110,
locked : true,
   sortable : true
}, {
header : "메일",
dataIndex : 'email',
   sortable : true    
}, {
header : "보유자산",
dataIndex : 'money',
align : 'right',
width : 90,
   sortable : true    
}, {
header : "등록일",
dataIndex : 'reg_dt',
align : 'center',
width : 80,
   sortable : true
}, {
header : "기타1",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타2",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타3",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타4",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타5",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타6",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타7",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타8",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타9",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}, {
header : "기타10",
dataIndex : 'temp',
align : 'center',
width : 100,
   sortable : true
}
       ],
       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.loadPage(1);
//window.onload =fncIframeResize(); //왼쪽메뉴 있을 경우 iframe resize
}

</script>

<!-- 설명-->
<div>
- GRID에서 특정 열부터 스크롤을 생성하고, 앞의 열을 고정시킬 경우 사용한다.<br>
- 고정필드는 locked를 true로 한다.<br>
- <font color='red'>panel에 height를 주거나, stord load 에 callback 함수를 사용해서 heigth 높이만큼 계산해해서 넣어줘야 한다.</font><br>
<br>
</div>
<!-- //설명 -->

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

<div style="height:10px;"></div>