sample - Type Edit

<#ftl encoding="utf-8">
<#--
File Name : indexTypeEdit.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: 'sex',  mapping: 'sex'},
{name: 'marriage_bool',  mapping: 'marriage', type: 'bool', convert: function(v){ return (v === "1" || v === true) ? true : false;} },
{name: 'report',  mapping: 'report'},
{name: 'img',  mapping: 'img'},
{name: 'reg_dt',  mapping: 'reg_dt'} ,
{name: 'marriage', mapping: 'marriage' }
       ]
   });

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

   // 콤보박스(성별) Store 정의
var sexStore = Ext.create('Ext.data.Store', {
//autoDestroy: true,
        fields: ['use_cd', 'use_nm'],
        data : [
        {"use_cd":"1", "use_nm":"남자"},
       {"use_cd":"2", "use_nm":"여자"}
        ]
});
//sexStore.load();

   //CellEditing 선언
     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 : 70,
align : 'center',
editor : {
               xtype: 'textfield',
               allowBlank : false
   }
}, {
header : "보유자산",
dataIndex : 'money',
align : 'right',
width : 90,
editor : {
               xtype: 'textfield',
               allowBlank : false
   }
}, {
header : "성별",
dataIndex : 'sex',
align : 'center',
width : 60,
//tdCls :'td_essential',
           editor: {
               xtype: 'combobox',
               typeAhead: true,
               triggerAction: 'all',
               selectOnTab: true,
               store: sexStore,
listeners: {
   select: function(combo, record, index) {
      cellEditing.completeEdit();
   }
},
valueField: 'use_cd',
                   displayField: 'use_nm',
               editable: false
           },
           renderer: function(value){
var index = sexStore.findExact('use_cd',value);
               if (index != -1){
                   rs = sexStore.getAt(index).data;
                   return rs.use_nm;
               }          
           }
}, {
header : "결혼여부",
xtype: 'checkcolumn',
dataIndex : 'marriage_bool',
align : 'right',
width : 90,
listeners : {
checkchange : function(column, recordIndex, checked) {

var record = mainGrid.store.getAt(recordIndex);

if(checked == true) record.set('marriage', 'Y');
else record.set('marriage', '');
}
}
}, {
header : "사진",
dataIndex : 'img',
flex : 1,
align : 'center',
renderer   : function(value, meta, record, rowIndex){
if(value != '') {
return '<img src=\"'+value+'\" />';
} else {
return '';
}
}
}, {
header : "다운로드",
dataIndex : 'report',
align : 'center',
width : 70,
renderer   : function(value, meta, record, rowIndex){
if(value != '') {
return '<table width="100%" border="0"><tr><td align="right"><span class="btn_pack small"><a href="javascript:fncDownloadSampleFile(\''+value+'\')">다운로드</a></span></td></tr></table>';
} else {
return '';
}
}
}, {
header : "등록일",
dataIndex : 'reg_dt',
align : 'center',
width : 70
}, {
header : "결혼여부(Hidden)",
dataIndex : 'marriage',
hidden : true
}
       ],
       renderTo: 'div_mainlist_grid', // 그리드에 매핑하는 DOM 객체 (DIV 태그)
       plugins: [cellEditing]
   });
 
   //목록조회 Grid load
   fncGoSearch();
 
   //window.onload =fncIframeResize(); //resize

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

/**
* Function Name : fncGoCompRowMaterialDownload()
* Description : 다운로드
*/
function fncDownloadSampleFile(filename) {

//$.download("<@spring.url '/sample/grid/downloadSampleFile.do'/>",
//  'filename='+filename);
$(location).attr('href','<@spring.url "/sample/grid/downloadSampleFile.do?filename="/>' + filename);

}

</script>

<!-- 설명-->
<div>
- editor에서 여러 형대의 xtype을 지정한다. (textfield, combobox, checkcolumn 등)<br>
- xtype에 대한 상세내역은 Form type에서 참조<br>
<br>
</div>
<!-- //설명 -->

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