sample - Format Grid

- From 전송시에 Json List 포멧으로 변경한다.<br>
- Ajax를 통해 서버로 전송한다.<br>
- vtype 통하여 표현을 위해 사용된 기호는 서버(Java나 Oracle등)에서 제거해야 한다.

<#ftl encoding="utf-8">

<#--

File Name : indexFormatGrid.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_add_save',

      text   : '저장',

      style: { padding: "2px 5px 2px 5px" },

      renderTo: 'div_btn_add_save',   

      handler : function() {




       if ( !fncExtGridisValid(mainGrid.getStore()) ) {

        Ext.Msg.alert("알림", "필수 항목을 입력해주세요.");

        return;

       }

       

    Ext.MessageBox.confirm('저장', '저장하시겠습니까?',

     function(btn){

      if (btn == "yes") {




      //console.log("===new===");

      //console.log( fncPushRecords(mainJsonStore.getNewRecords()) );

      //console.log( Ext.encode(fncPushRecords(mainJsonStore.getNewRecords())) );

      //console.log("===update===");

      //console.log( fncPushRecords(mainJsonStore.getUpdatedRecords()) );

      //console.log( Ext.encode(fncPushRecords(mainJsonStore.getUpdatedRecords())) );

      //console.log("===delete===");

      //console.log( fncPushRecords(mainJsonStore.getRemovedRecords()) );

      //console.log( Ext.encode(fncPushRecords(mainJsonStore.getRemovedRecords())) );




      $.ajax({

       url: '<@spring.url "/sample/validation/saveGridEditJsonSamplePrc.do" />',

       type: "post",

       data: {

        new_json_list : Ext.encode(fncPushRecords(mainJsonStore.getNewRecords())), 

        modify_json_list : Ext.encode(fncPushRecords(mainJsonStore.getUpdatedRecords())), 

        remove_json_list : Ext.encode(fncPushRecords(mainJsonStore.getRemovedRecords()))

        },

       dataType: "json",

       beforeSend: function(){},

       success: function(jsonObj){

        Ext.Msg.alert("알림", "저장되었습니다.");

        setTimeout(function(){ 

         Ext.MessageBox.hide();

        }, 2000);    

       } // success

      }); // $.ajax end




      

      }

     }

    );

 

      } // function() end.

  });

  

  // 행추가 버튼

  Ext.create('Ext.Button', {

   id  : 'btn_pcost_add',

         text: '행추가',

      iconCls : 'icon_add',

      renderTo: 'div_btn_pcost_add',   

      handler : function() {

       

       //console.log(fncExtGridisValid(mainGrid.getStore()));

       

       if ( !fncExtGridisValid(mainGrid.getStore()) ) {

        Ext.Msg.alert("알림", "필수 항목을 입력해주세요.");

        return;

       }




             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();

        

      }

  });  




  // 행삭제 버튼

  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: 'salary',  mapping: 'salary', type: 'int', useNull: true},

    {name: 'sex',  mapping: 'sex'},

    {name: 'marriage_bool',  mapping: 'marriage', type: 'bool', convert: function(v){ return (v === "Y" || v === true) ? true : false;} },

    {name: 'pur_cnt',  mapping: 'pur_cnt', type: 'int', useNull: true},

    {name: 'pur_money',  type: 'int', defaultValue:1000},

    {name: 'tot_money', mapping: 'tot_money', type: 'int'},

    {name: 'bal_money', mapping: 'bal_money', type: 'int'},

    {name: 'marriage', mapping: 'marriage' }

         ],

      validations:

            [

                  {type: 'presence',  field: 'cust_id'},

                  {type: 'presence',  field: 'cust_nm'},

                  {type: 'presence',  field: 'salary'},

                  {type: 'presence',  field: 'pur_cnt'}

             ] 

     });

  

     // 2. Store 정의

     mainJsonStore = Ext.create('Ext.data.Store', {

         model: 'MainJsonList', // 선언한 모델 정의..

         remoteSort: true,

         proxy: {

             type: 'ajax',

             url: '<@spring.url "/sample/validation/listValidationSamplePrc.do" />',

             headers: { 'Accept': 'application/json' }, 

             reader: {          

                 root: 'listGridSample'   // JSON 데이터의 ROOT

             }

         }  

     });

 

     //Editing

     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,

         viewConfig: {

             trackOver: true,

             stripeRows: true,

             forceFit: false

         },

         features: [{

             ftype: 'summary'

         }],

         // grid columns

         columns:[

    { 

     header   : 'cust_id',

     dataIndex : 'cust_id',

        sortable : true,

        width  : 90,

        tdCls :'td_essential',

     editor  : {

                     xtype: 'textfield',

                     allowBlank : false

            },

           summaryRenderer: function(value) {

      return '<h4>합계</h4>';

           }

    }, {

     header  : "고객명",   

     dataIndex : 'cust_nm',

     flex  : 1, 

     align   : 'center',

        sortable : true,

        tdCls :'td_essential',

     editor  : {

                     xtype: 'textfield',

                     allowBlank : false

            },

       summaryType: 'count',

           summaryRenderer: function(value) {

      return '<h4>COUNT : ' + Ext.util.Format.number(value, '0,000') + '</h4>';

           }

    }, {

     header  : "결혼여부", 

     xtype: 'checkcolumn',

     dataIndex : 'marriage_bool',

     align   : 'right',

     width  : 60,

     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 : 'salary',

     align   : 'right',

     width  : 90,

        sortable : true,  

        tdCls :'td_essential',

        //tdCls :'td_essential',

     editor  : {

                     xtype: 'textfield'

            },

     renderer :  Ext.util.Format.numberRenderer('0,000'),

       summaryType: 'sum',

           summaryRenderer: function(value) {

      return '<h4>' + Ext.util.Format.number(value, '0,000') + '</h4>';

           }

    }, {

     header  : "복권금액", 

     dataIndex : 'pur_money',

     align   : 'right',

     width  : 60,

        sortable : true,  

     renderer :  Ext.util.Format.numberRenderer('0,000'),

       summaryType: 'sum',

           summaryRenderer: function(value) {

      return '<h4>' + Ext.util.Format.number(value, '0,000') + '</h4>';

           }

    }, {

     header  : "복권구입갯수", 

     dataIndex : 'pur_cnt',

     align   : 'right',

     width  : 60,

        sortable : true,

        tdCls :'td_essential',

     editor  : {

                     xtype: 'textfield'

            },

     renderer :  Ext.util.Format.numberRenderer('0,000'),

       summaryType: 'sum',

           summaryRenderer: function(value) {

      return '<h4>' + Ext.util.Format.number(value, '0,000') + '</h4>';

           }

    }, {

     header  : "구입합계", 

     dataIndex : 'tot_money',

     align   : 'right',

     width  : 90,

        sortable : true,  

     renderer :  Ext.util.Format.numberRenderer('0,000'),

       summaryType: 'sum',

           summaryRenderer: function(value) {

      return '<h4>' + Ext.util.Format.number(value, '0,000') + '</h4>';

           }

    }, {

     header  : "잔액", 

     dataIndex : 'bal_money',

     align   : 'right',

     width  : 90,

        sortable : true,  

     renderer :  Ext.util.Format.numberRenderer('0,000'),

       summaryType: 'sum',

           summaryRenderer: function(value) {

      return '<h4>' + Ext.util.Format.number(value, '0,000') + '</h4>';

           }

    }, {

     header  : "결혼여부(Hidden)", 

     dataIndex : 'marriage',

     hidden   : true

    }

         ],

         renderTo: 'div_mainlist_grid', // 그리드에 매핑하는 DOM 객체 (DIV 태그)

         plugins: [cellEditing]

     });




  // 이벤트

  mainGrid.on('edit', function(editor, e) {




   //console.log(e.record.get('salary'));

   //console.log(e.record.get('pur_cnt'));

   //console.log(e.record.get('marriage_bool'));

   //console.log(e.record.get('marriage'));

   

   if (e.column.dataIndex == 'salary' || e.column.dataIndex == 'pur_cnt') {

    if (e.record.get('salary') != null && e.record.get('pur_cnt') != null) {

     e.record.set('tot_money', e.record.get('pur_money') * e.record.get('pur_cnt'));

     e.record.set('bal_money', e.record.get('salary') - (e.record.get('pur_money') * e.record.get('pur_cnt')));

    }

   }




  });  




  /*

  mainGrid.on('checkchange', function(node, checked) {

      node.eachChild(function(n) {

          n.getUI().toggleCheck(checked);

      });

  });

  */




     //목록조회 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:{start:0,

    limit:$('#page_limit').val()

   },

   callback: function () {

                var count = mainGrid.getStore().getTotalCount();

                window.onload =fncIframeResizeGrid(count);

   }

  });  

  

  setTimeout(function() {

      fncGridResize();

  }, 200);

  

 }




 /**

 * Function Name : fncGridResize()

 * Description : GRID RESIZE

 */

 function fncGridResize() {  

     var rowCount2 = mainGrid.getStore().getCount();

     window.onload =fncIframeResize();

 }

 

</script>




 <!-- 설명-->

 <div>

  - From 전송시에 Json List 포멧으로 변경한다.<br>

  - Ajax를 통해 서버로 전송한다.<br>

  - <font color='red'>vtype 통하여 표현을 위해 사용된 기호는 서버(Java나 Oracle등)에서 제거해야 한다.</font><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>