sample - Format Edit

<#ftl encoding="utf-8">
<#--
File Name : indexFormatEdit.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: 'birthday',  mapping: 'birthday'},
{name: 'reg_dt',  mapping: 'reg_dt'}      
       ]
   });

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

       var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
       clicksToEdit: 1
   });

   // 3. 리스트 그리드
mainGrid = Ext.create('Ext.grid.Panel', {
      id : 'main_grid',
       width: '100%',
       //height : 145,
       store: mainJsonStore,
columnLines: true,
disableSelection: false,
sortableColumns: false,
       loadMask: true,
       viewConfig: {
           trackOver: true,
           stripeRows: true,
           forceFit: false
       },
       // grid columns
       columns:[
{
header : 'cust_id',
dataIndex : 'cust_id',
hidden : true
}, {
header : "고객명",  
dataIndex : 'cust_nm',
width : 80,
align : 'center',
editor : {
               xtype: 'textfield',
               allowBlank : false
   }
}, {
header : "전화",
dataIndex : 'cpy_telno',
width : 110,
editor : {
               xtype: 'textfield',
               allowBlank : false
               ,vtype: 'phone'
               ,plugins: new Ext.ux.plugin.FormatPhoneNumber()
   },
renderer : function(value, meta, record){
return fncTelNumFormatter(value);
}  
}, {
header : "메일",
dataIndex : 'email',
flex : 1,  
editor : {
               xtype: 'textfield',
               allowBlank : false
               ,vtype: 'email'
   }
}, {
header : "보유자산",
dataIndex : 'money',
align : 'right',
width : 150,
editor : {
               xtype: 'textfield',
               allowBlank : false,
               vtype : 'money'//,
//plugins: new Ext.ux.plugin.FormatMoneyNumber()
   },
renderer :  Ext.util.Format.numberRenderer('0,000.0')
}, {
header : "생일",
dataIndex : 'birthday',
align : 'center',
width : 80,
editor : {
               xtype: 'textfield',
               allowBlank : false,
               vtype : 'date',
plugins: new Ext.ux.plugin.FormatDateNumber()
   },
renderer : function(value, meta, record){
return fncDateNumFormatter(value);
}  
}
       ],
       renderTo: 'div_mainlist_grid', // 그리드에 매핑하는 DOM 객체 (DIV 태그)
       plugins: [cellEditing]
   });
 
   //목록조회 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내에 편집할 데이터를 다양한 형태의 Format으로 변경한다.<br>
- Number, Date 등은 ExtJS에서 제공하는 Format(Ext.util.Format)을 사용한다.<br>
- 전화번호, 주민번호등은 자체적으로 만든 함수를 사용한다.<br>
- 'Ext.ux.plugin'으로 Format을 변경한다.<br>
- vtype으로 지정된 Format을 검증한다.(true/false return)<br>
- 처음 값이 바이딩될때는 renderer를 통해 Format을 변경한다.<br>
<br>
</div>
<!-- //설명 -->

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