ExtJS Grid custom colum

var sm = Ext.create('Ext.selection.CheckboxModel',{
   mode : 'multi',
   showHeaderCheckbox: false,
   checkOnly:true,
   enableKeyNav : false,
   listeners: {
    select : function ( records, keepExisting, suppressEvent )
    {
    }
   } 
});

var grid2 = Ext.create('Ext.grid.Panel', {
store: storeContract1,
hideHeaders : true,
//autoScroll:true,
selModel: sm,
columns: [
 {
 text: "", flex: 1, xtype: 'templatecolumn',tpl: new Ext.XTemplate(
'<br />
<table style="width: 80%px;"><tbody>
<tr><td>Contract #</td><td>{CONTRACTNUMBER}</td><td>Disconnect On</td><td><span class="datepicker"></span></td><td>DECODER</td><td><tpl for="DECODER"></tpl><br />
<div>
- {.}</div>
</td></tr>
<tr><td colspan="6">

</td><td></td></tr>
<tr><td>Start Date</td><td>{STARTDATE}</td><td>Reason</td><td><select class="reason"><option value="1">Expired</option><option value="-1">Lease Termination</option><option value="-2">VACATION</option><option value="3">Technical Problem</option><option value="2">Promose to Pay</option><option value="4">Contract Disconnection</option></select></td><td>PLAN DESC</td></tr>
<tr><td>End Date </td><td>{ENDDATE}</td><td colspan="2"></td><td><tpl for="PLAN_DESC"></tpl><br />
<div>
- {.}</div>
</td></tr>
<tr><td>Notes</td><td colspan="2"><span class="note"></span></td></tr>
</tbody></table>
'),
  
 },            
],
height: 300,
frame: true,
title: 'List Of Active Contract',
dockedItems: [{
 xtype: 'toolbar',
 dock: 'bottom',
 ui: 'footer',
 layout: {
  pack: 'center'
 },
 items: [{
  minWidth: 80,
  text: 'Save',
  handler : function (){ 
   if (grid2.getSelectionModel().hasSelection()) {        
      var s        = grid2.getSelectionModel().getSelection();
      var contract = [];
      var note     = [];
      var record   = {};
      var array    =  [];
      var n        =  Ext.select('.pesan');        
      var  rec_date  =    Ext.select('.tanggal');
      var  reason    =    Ext.select('.reason');
     
         
      Ext.each(s, function (item,index) {                             
    
      record.notes      =  n.elements[item.data.INDEX].value;
      record.contract_number    =  item.data.CONTRACTNUMBER;
      record.disconnect_on      =  rec_date.elements[item.data.INDEX].value;
      record.reason             =  reason.elements[item.data.INDEX].value;
     
      array.push({
       'notes'    : record.notes,
       'contract_number'  : record.contract_number,
       'disconnect_on'   : record.disconnect_on,
       'reason'   : record.reason 
      });        
      
      
    }); 
    
    var jsonData = Ext.encode(array);
    Ext.getBody().mask('Processing, please wait...', 'x-mask-loading');
    Ext.Ajax.request({
      url: 'subscriber/disconnect_customer/simpan',
      async:true,
      method : 'POST',
      params: {
       records    :  jsonData,
      },
      success: function(response){
       Ext.getBody().unmask(); 
       obj = Ext.JSON.decode(response.responseText);
       Ext.getCmp('msginfo1').setText(obj.message);
       Ext.getCmp('msginfo2').setText(' ');
       msginfo.show();
       msg_info.hide();
       window.scrollTo(0, 0);
       
      }
    }); 
      
   }      
  }
 },{
  minWidth: 80,
  text: 'Cancel',
  handler : function (){
  }
 }]
}],
       
});