sample - Change Edit

<#ftl encoding="utf-8">
<#--
File Name : indexChangEdit.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(){

// 행추가 버튼
Ext.create('Ext.Button', {
id : 'btn_pcost_add',
       text: '행추가',
   iconCls : 'icon_add',
   renderTo: 'div_btn_pcost_add',
   handler : function() {
   
    //필수입력항목 체크
    if ( fncExtGridisValid(mainGrid.getStore()) ) {
   
            var row = Ext.ModelManager.create({
                //seqn : rowCount+1,
                //pcost_icsn_yn : 'Y',
               }, 'MainJsonList');
         
            var rowCount = mainGrid.getStore().getCount();
            //console.log(rowCount);

            mainJsonStore.insert(rowCount, row);
               cellEditing.startEditByPosition({row: rowCount, column: 1});
             
               var rowCountNew = mainGrid.getStore().getCount();
             
               //console.log(rowCountNew);
               //mainGrid.setHeight(rowCountNew * 22);
             
               window.onload =fncIframeResize();
   
    } else {
Ext.Msg.alert("알림", "필수 항목을 입력해주세요.",function(btn,txt){});
    }
   
   }
});

// 행삭제 버튼
Ext.create('Ext.Button', {
id : 'btn_pcost_remove',
       text: '행삭제',
   iconCls : 'icon_del',
   renderTo: 'div_btn_pcost_remove',
   handler : function() {
   
var chk = Ext.getCmp('main_grid').getSelectionModel().getSelection();

if(chk.length==0) {
Ext.Msg.alert("알림","삭제할 항목을 선택해 주시기 바랍니다.");
return;
}

for(var i = 0; i < chk.length; i++) {
var flag = chk[i].get('cmpy_id');
mainJsonStore.remove(chk[i]);
}

   }
});

  // 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'} ,
{name: 'sex',  mapping: 'sex'},
{name: 'marriage',  mapping: 'marriage', type: 'bool'},
       ],
    validations:
            [
                  {type: 'presence',  field: 'cust_nm'}
             ]      
   });

   // 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":"여자"}
        ]
});
 
   var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
       clicksToEdit: 1
   });

// check box
var sm = Ext.create('Ext.selection.CheckboxModel',{
listeners: {
           selectionchange: function(sm, selections) {

//event 로직구현
           
           } // selectionchange 끝
       } // listener 끝
});
 
   // 3. 리스트 그리드
mainGrid = Ext.create('Ext.grid.Panel', {
      id : 'main_grid',
       width: '100%',
       //autoHeight: true,
       store: mainJsonStore,
columnLines: true,
disableSelection: false,
sortableColumns: false,
       loadMask: true,
       selModel : sm,
       // grid columns
       columns:[
{
header : 'cust_id',
dataIndex : 'cust_id',
hidden : true
}, {
header : "고객명",  
dataIndex : 'cust_nm',
width : 70,
align : 'center',
tdCls :'td_essential',
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',
               vtype: 'email'
   }
}, {
header : "보유자산",
dataIndex : 'money',
align : 'right',
width : 100,
editor : {
               xtype: 'textfield',
               vtype : 'money',
plugins: new Ext.ux.plugin.FormatMoneyNumber()
   },
renderer : function(value, meta, record){
return fncMoneyNumFormatter(value);
}  
}, {
header : "생일",
dataIndex : 'birthday',
align : 'center',
width : 80,
editor : {
               xtype: 'textfield',
               vtype : 'date',
plugins: new Ext.ux.plugin.FormatDateNumber()
   },
renderer : function(value, meta, record){
return fncDateNumFormatter(value);
}  
}, {
header : "성별",
dataIndex : 'sex',
align : 'center',
width : 50,
//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',
align : 'right',
width : 60,
editor : {
               xtype: 'checkbox',
               cls: 'x-grid-checkheader-editor'
   }
}
       ],
       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);
            }
        });
}

/**
* Function Name : fncGridResize()
* Description : GRID RESIZE
*/
function fncGridResize() {
    var rowCount2 = mainGrid.getStore().getCount();
    window.onload =fncIframeResize();
}

</script>

<!-- 설명-->
<div>
- 행을 추가/삭제한다.<br>
- 행 추가 시  필수 항목이 입력되어 있지 않으면, 다음 행을 추가할 수 없다.<br>
- 행 삭제 시 체크되어 있는 항목이 없으면 삭제할 수 없다.<br>
- 저장은 Validation 참조<br>
</div>
<!-- //설명 -->

<div class="title_area">
<div class="btn_right">
<div id="div_btn_pcost_add"  auth=“C" btn_id="btn_pcost_add" style="float:left;padding-left:5px"></div>  <!-- 행추가 -->
<div id="div_btn_pcost_remove"  auth=“C" btn_id="btn_pcost_remove" style="float:left;padding-left:5px"></div>  <!-- 행삭제 -->
<div id="div_btn_add_save"  auth=“C" btn_id="btn_add_save" style="float:left;padding-left:15px"></div>  <!-- 저장 -->
</div>
</div>

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