【问题标题】:Adding the cell values of a record in grid and get the result in the last cell of the record in extjs在网格中添加记录的单元格值并在 extjs 中记录的最后一个单元格中获取结果
【发布时间】:2013-03-01 11:35:09
【问题描述】:

这里我的网格名称是“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'));
        }
    }

【问题讨论】:

    标签: extjs4 sum extjs-mvc


    【解决方案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);
    });
    

    【讨论】:

    • 这也是我在这种情况下所做的一般概念。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多