在網格中添加記錄的單元格值，並在extjs的記錄的最後一個單元格中獲得結果

Question

這裏我的網格名稱是「rightpanel」。我試圖在記錄的每個單元格中添加輸入的值 ，並在記錄的最後一個 單元格/列中顯示總數。但我面臨的問題與計算 與登錄下面給出的全部努力。是否他們的任何其他方式來達到這個目的？ ？
在這裏我插入時間（例如 - > 2.03）在我的細胞。感謝& 問候

var selectionModel = new Ext.selection.CheckboxModel(); 
    var fm=Ext.form; 
    var currentRecord; 
    var oldValue;//used to store old effort while re-editing the already entered cell 
    Ext.define('AM.view.rightpanel' ,{ 
     extend:'Ext.grid.Panel', 
     alias : 'widget.rightpanel', 
     selModel : selectionModel, 
     store : 'addtaskstore',    
     id : 'rightpanel', 
     columnLines : true, 
     width:724, 
     selType: 'cellmodel',    
     plugins: [ 
      Ext.create('Ext.grid.plugin.CellEditing', { 
       clicksToEdit: 1,     
       pluginId:'rightPanelEditor' 
      }) 
     ], 

此偵聽器是用來聽點擊每個單元格，並捕獲單元格中的舊值支持我的邏輯

 listeners:{ 
      cellclick:function(thisObj, td, cellIndex, record, tr, rowIndex, e, eOpts) 
      {     
      var dataIndex = thisObj.getHeaderCt().getHeaderAtIndex(cellIndex).dataIndex; 
       if(eval(record.get(dataIndex))< 12) //changes made after main logic 
       { 
        oldValue = record.get(dataIndex);    
       } 
       currentRecord = record; 
      }  
     },     

     title:'TIMESHEET', 
     columns: [    
        { 
         header: 'Tasks', 
         dataIndex: 'task_name', 
         width: 160 
        }, 
        { 
         header: 'Project Name', 
         dataIndex: 'project_name', 
         width: 160 
        }, 
       { 
         dataIndex: 'monday', 
         width: 95, 
         id:'monday', 
         editor:{ 
          xtype:'textfield', 
          listeners:{ 
          'blur':function(o, t, h){       
           if(validateEffort(o)){ 
            calculateTotal(o.value); 
           }       
          } 
         }  
         }    
        }, 
       { 
         dataIndex: 'tuesday', 
         width: 95, 
         id:'tuesday', 
         editor:{ 
          xtype:'textfield', 
          listeners:{ 
          'blur':function(o, t, h){ 
           if(validateEffort(o)){ 
            calculateTotal(o.value); 
           } 
          } 
         }  
         } 
        }, 
        { 
         dataIndex: 'wednesday', 
         width: 95, 
         id:'wednesday', 
         editor:{ 
          xtype:'textfield', 
          listeners:{ 
          'blur':function(o, t, h){ 
           if(validateEffort(o)){ 
            calculateTotal(o.value); 
           } 
          } 
         }  
         } 
        }, 
        { 
         dataIndex: 'thursday', 
         width: 95, 
         id:'thursday', 
         editor:{ 
          xtype:'textfield', 
          listeners:{ 
          'blur':function(o, t, h){ 
           if(validateEffort(o)){ 
            calculateTotal(o.value); 
           } 
          } 
         }  
         } 
        }, 
        { 
         dataIndex: 'friday', 
         width: 95, 
         id:'friday', 
         editor:{ 
          xtype:'textfield', 
          listeners:{ 
          'blur':function(o, t, h){ 
           if(validateEffort(o)){ 
            calculateTotal(o.value); 
           } 
          } 
         }  
         } 
        }, 
        { 
         dataIndex: 'saturday', 
         width: 95, 
         id:'saturday', 
         editor:{ 
          xtype:'textfield', 
          listeners:{ 
          'blur':function(o, t, h){ 
           if(validateEffort(o)){ 
            calculateTotal(o.value); 
           } 
          } 
         }  
         } 
        }, 
        { 
         dataIndex: 'sunday', 
         width: 95, 
         id:'sunday', 
         editor:{ 
          xtype:'textfield', 
          listeners:{ 
          'blur':function(o, t, h){ 
           if(validateEffort(o)){ 
            calculateTotal(o.value); 
           } 
          } 
         }  
         } 
        }, 
        { 
         header: 'Total Efforts', 
         dataIndex: 'total_efforts', 
         width: 95, 
         editor:{ 
          xtype:'textfield', 
          disabled:true 
         }  
        } 
       ], 

    initComponent: function() { 

     this.callParent(arguments); 

    } 

    }); 

此功能用於驗證數字格式（如2.34）在單元格中輸入點擊

function validateEffort(obj){ 
     var regEx=/(^([0-9]|[0-1][0-9]|[2][0-3]).([0-5][0-9])$)|(^([0-9]|[1][0-2])$)/; 
     if(obj && !regEx.test(obj.value)){ 
      alert("Invalid value"); 
      obj.setValue(oldValue); 
      return false; 
     } 
     return true; 
    } 

此函數用於計算總努力（及時）在dataIndex：'total_efforts'列中顯示。

function calculateTotal(newValue){ 
     //alert("old = "+oldValue + " new = " +newValue); 
     oldValue = oldValue?oldValue:0.00; 
     if(currentRecord && oldValue !=newValue){ 
      var currTotal = currentRecord.get('total_efforts');  
      //alert("currTotal=="+currTotal);  
      if(!currTotal || currTotal == 'NaN'){ 
       currTotal = 0.00; 
      } 
      currentRecord.set('total_efforts',((eval(currTotal)+eval(newValue)-eval(oldValue))).toFixed(2)); 
      var newcurrTotal = currentRecord.get('total_efforts'); 
      var arr = []; 
      arr=newcurrTotal.split("."); 
      //alert("arr[1]--> " +arr[1]); 
      //alert(newcurrTotal); 
      if(eval(arr[1])>=60) 
      { 
       var q =parseInt(eval(arr[1])/60); 
       //alert("q --> "+parseInt(q)); 
       var r = (eval(arr[1])%60)/100; 
       //alert("r --> "+r);  
         var newtotal = eval(newcurrTotal)+eval(q)-(eval(arr[1])/100)+r; 
       alert("new---> "+newtotal.toFixed(2)); 
       //currentRecord.set('total_efforts',newtotal.toFixed(2)); 

      }  
      //alert("new total=="+currentRecord.get('total_efforts')); 
     } 
    } 

Answer 1

利用網格的edit事件時，將觸發細胞（或行）編輯完成。

var grid = Ext.create('Ext.grid.Panel', { 
    plugins [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     }) 
    ], 
    columns: title:'TIMESHEET', 
    columns: [{ 
     dataIndex: 'monday', 
     width: 95, 
     id:'monday', 
     editor: { 
      xtype: 'numberfield', 
      regex: /(^([0-9]|[0-1][0-9]|[2][0-3]).([0-5][0-9])$)|(^([0-9]|[1][0-2])$)/ 
     } 
    }, // ... other days of week 
    { 
     header: 'Total Efforts', 
     dataIndex: 'total_efforts', 
     width: 95 
    }] 
}); 

grid.on('edit', function(editor, e) { 
    var record = e.record, 
     total = 0; 

    // this isn't the most efficient with recalculating the total every time but it 
    // really shouldn't matter. 
    total += record.get('monday') || 0; 
    total += record.get('tuesday') || 0; 
    total += record.get('wednesday') || 0; 
    total += record.get('thursday') || 0; 
    total += record.get('friday') || 0; 
    total += record.get('saturday') || 0; 
    total += record.get('sunday') || 0; 

    record.set('total_efforts', total); 
});