Có thể hiển thị nhiều hơn một hàng tóm tắt trong bảng điều khiển của extjs không?

Question

Sau đây là mã của tôi để hiển thị bảng điều khiển lưới có tổng chi phí. Tôi muốn hiển thị một hàng tóm tắt khác với mức trung bình. Vì vậy, bất kỳ giúp đỡ?

Ext.require(['Ext.data.*', 'Ext.grid.*']); 

    Ext.onReady(function() { 

    Ext.define('NewEstimate', { 
     extend: 'Ext.data.Model', 
     fields: ['description', 'cost'], 
     validations: [{ 
      type: 'length', 
      field: 'description', 
      min: 3 
     }, { 
      type: 'int', 
      field: 'cost', 
      min: 1 
     }] 
    }); 

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); 

    var store = Ext.create('Ext.data.Store', { 
      autoLoad: true, 
      autoSync: false, 
      model: 'NewEstimate', 
      proxy: { 
       type: 'rest', 
       url: 'app.php/users', 
       reader: { 
        type: 'json', 
        root: 'data' 
       }, 
       writer: { 
        type: 'json' 
       } 
      }, 
      listeners: { 
       write: function(store, operation){ 
        var record = operation.records[0], 
         name = Ext.String.capitalize(operation.action), 
         verb; 

        if (name == 'Destroy') { 
         verb = 'Destroyed'; 
        } else { 
         verb = name + 'd'; 
         alert(name); 
        } 
        Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId())); 

       } 
      } 
     }); 

    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1, 
      listeners: { 
       edit: function(){ 
        grid.getView().refresh(); 
       } 
      } 
     }); 

    var data = [ 
     {projectId: 100, taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', cost: 150}, 
     {projectId: 100, taskId: 113, description: 'Implement AnchorLayout', cost: 150}, 
     {projectId: 100, taskId: 114, description: 'Add support for multiple types of anchors', cost: 150}, 
     {projectId: 100, taskId: 115, description: 'Testing and debugging', cost: 0} 
    ]; 

    var gridPanel = new Ext.create('Ext.grid.Panel', { 
     width: 600, 
     height: Ext.getBody().getViewSize().height * 0.3, 
     renderTo: document.body, 
     plugins: [rowEditing], 
     features: [{ 
      ftype: 'summary' 
     } 
     ], 
     store: store, 
     columns: [{ 
      dataIndex: 'description', 
      flex: 1, 
      text: 'Description', 
      summaryType: 'count', 
      field: { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
      summaryRenderer: function(value){ 
       return Ext.util.Format.leftPad('Estimate Total (EUR)'); 
      } 
     }, { 
      dataIndex: 'cost', 
      width: 75, 
      text: 'Line Total', 

      field: { 
        xtype: 'numberfield', 
        allowBlank: false 
       }, 
      summaryType: function(records){ 
        var i = 0, 
         length = records.length, 
         total = 0, 
         record; 

        for (; i < length; ++i) { 
         record = records[i]; 
         total = total + Number(record.get('cost')); 
        } 
        return total; 
       } 
     }], 
     dockedItems: [ 
       { 
      xtype: 'toolbar', 
       items: [{ 
        text: 'Add', 
        iconCls: 'icon-add', 
        handler: function(){ 
         // empty record 
         store.insert(0, new NewEstimate()); 
         rowEditing.startEdit(0, 0); 
        } 
       } , '-', 
       { 
        text: 'Delete', 
        iconCls: 'icon-delete', 
        handler: function(){ 

         var selection = gridPanel.getView().getSelectionModel().getSelection()[0]; 

         if (selection) { 
          store.remove(selection); 
         } 
        } 
       }] 
      }] 
    }); 
    }); 

Cảm ơn trước

Answer 1

Tôi đã có một nhu cầu tương tự. Cho đủ thời gian, tôi có lẽ chỉ cần mở rộng tính năng Tóm tắt để hỗ trợ nhiều tập hợp. Tuy nhiên, tôi không có thời gian, vì vậy tôi đã làm một công việc bẩn thỉu xung quanh.

Thay vì cố gắng lấy hai hàng, tôi chỉ sử dụng summaryType làm hàm và trả về giá trị dưới dạng chuỗi có thẻ BR. Nó chắc chắn clunky, nhưng nó hoạt động cho những gì tôi cần.

Giống như:

columns: [ 
    { 
     header:'Quantity', 
     dataIndex: 'Quantity', 
     summaryType"="function(records) { 
     sum = 0; 
     for(rec in records) { 
      var record = records[ rec ]; 
      sum += record.data[ '#guide#_Quantity' ]; 
     } 
     avg= Math.floor(sum/records.length); 
     return '<strong>'+ sum + ' Books<br />' + avg + ' Books</strong>'; 
     } 
    } 
]