sample - Search Grid

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

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

Ext.onReady(function(){

// 조회 버튼 정의
Ext.create('Ext.Button', {
id :'btn_search',
   text    : '조회',
       style: { padding: "2px 5px 2px 5px" },
   renderTo: 'div_btn_search',
   handler : function() {
       fncGoSearch();
   }
});

  //데이터 모델 정의 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', type: 'float'},
{name: 'reg_dt',  mapping: 'reg_dt', type: 'date', dateFormat: 'Ymd'}      
       ]
   });

   //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
           }
       }
   });

   // 2-1. 검색구분 Store 정의
var codeListOrder = Ext.create('Ext.data.Store', {
        fields: ['code', 'code_nm'],
        data : [
        {"code":"", "code_nm":"전체"},
        {"code":"name", "code_nm":"이름"},
        {"code":"email", "code_nm":"이메일"},
        ]
});
 
//검색 field 선언
   formSet = new Ext.FormPanel({
       id : 'searchForm',
       frame: true,
       waitMsgTarget: true,
defaultType: 'textfield',
       items: [{
            //검색구분
                    xtype: 'combo',
                    name: 'search_key',
                    width : 90,
                    renderTo : 'div_search_key',
                    store: codeListOrder,
                    valueField: 'code',
                    displayField: 'code_nm',
                    editable : false,
                    value: '',
   listeners: {
      select : function(combo, records, eOpts){
      fncGoSearch();
      }
   }
                }, {
               //검색명
               name: 'search_val',
               renderTo : 'div_search_val',
               width : 165,
               cls : 'input_type1',
           listeners: {
               specialkey: function(field, e){
                   if (e.getKey() == e.ENTER) {
                       fncGoSearch();
                   }
               }
           }
           }
       ]
   });
 
   //리스트 그리드
mainGrid = Ext.create('Ext.grid.Panel', {
      id : 'main_grid',
       width: '100%',
       //height : 145,
       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,
renderer : function(value, meta, record){
return fncTelNumFormatter(value);
}  
}, {
header : "메일",
dataIndex : 'email',
flex : 1,
   sortable : true    
}, {
header : "보유자산",
dataIndex : 'money',
align : 'right',
width : 90,
renderer :  Ext.util.Format.numberRenderer('0,000'),
   sortable : true    
}, {
header : "등록일",
dataIndex : 'reg_dt',
align : 'center',
width : 80,
   sortable : true,
   renderer: Ext.util.Format.dateRenderer('Y-m-d')
   //format: 'm/d/y'
}
       ],
       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() {

var searchData = formSet.getForm().getValues();

// Store에서 remoteSort: true 이면 추가한다.
var proxy = mainJsonStore.getProxy();
proxy.extraParams.search_key = searchData['search_key'];
proxy.extraParams.search_val = searchData['search_val'];

//console.log("-------" + searchData['search_key']);
//console.log(searchData);

mainJsonStore.load({
            params:{
            search_key: searchData['search_key'],
            search_val: searchData['search_val']
             },
            callback: function () {
                var count = mainGrid.getStore().getTotalCount();
                window.onload =fncIframeResizeGrid(count);
            }
        });
//window.onload =fncIframeResize(); //왼쪽메뉴 있을 경우 iframe resize
}

</script>

<!-- 설명-->
<div>
- GRID에 검색조건에 따라 GRID에 결과값을 보여준다.<br>
- FormPanel을 사용하여 Item내에 input type를 선언한다.<br>
- 상세 내역은 Form Field를 참조한다.<br>
</div>
<!-- //설명 -->

<div class="btn_area">
<div id="div_btn_search" auth="L" btn_id="btn_search"></div>
</div>

<!-- 조회영역 -->
<div class="tbl_box mt5">
<table class="tbl_ext_item">
<colgroup>
<col width="13%" />
<col />
</colgroup>
<tbody>
<tr>
<th>검색</th>
<td>
<ul>
<li style="float:left;padding-right:5px;"><div id="div_search_key" /></li>
<li style="float:left;padding-right:5px;"><div id="div_search_val" /></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<!-- //조회영역 -->

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