Czy jest możliwe pokazanie więcej niż jednego wiersza podsumowania w gridpanel z extjs?

Question

Poniżej przedstawiono mój kod, aby wyświetlić panel siatki z podsumowaniem kosztów całkowitych. Chcę pokazać inny wiersz podsumowania ze średnią. Więc jakąkolwiek pomoc?

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); 
         } 
        } 
       }] 
      }] 
    }); 
    }); 

góry dzięki

Answer 1

miałem podobną potrzebę. Biorąc pod uwagę wystarczająco dużo czasu, prawdopodobnie rozszerzę funkcję Podsumowanie, aby obsługiwać wiele agregacji. Jednak nie miałem czasu, więc zrobiłem coś w rodzaju brudnej pracy.

Zamiast próbować uzyskać dwa wiersze, użyłem właśnie funkcji summaryType jako funkcji i zwróciłem wartość jako ciąg znaków BR. Jest zdecydowanie przylegający, ale działa na to, czego potrzebuję.

Coś jak:

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>'; 
     } 
    } 
]