È possibile mostrare più di una riga di riepilogo in gridpanel di extjs?

Question

Di seguito è riportato il mio codice per mostrare un pannello della griglia con il riepilogo dei costi totali. Voglio mostrare un'altra riga di riepilogo con la media. Quindi qualche aiuto?

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

Grazie in anticipo

Answer 1

ho avuto una simile esigenza. Dato un tempo sufficiente, probabilmente estenderei la funzione Riepilogo solo per supportare più aggregati. Tuttavia, non avevo tempo, quindi ho fatto una specie di lavoro sporco.

Invece di provare a ottenere due righe, ho usato summaryType come funzione e ho restituito il valore come stringa con un tag BR. È decisamente goffo, ma funziona per quello di cui ho bisogno.

Qualcosa di simile:

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