Ist es möglich, mehr als eine Zusammenfassungszeile im Gridpanel von extjs anzuzeigen?

Question

Im Folgenden finden Sie meinen Code, um eine Tabelle mit Gesamtkosten zu zeigen. Ich möchte eine weitere zusammenfassende Zeile mit Durchschnitt anzeigen. Also jede Hilfe?

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

Vielen Dank im Voraus

Answer 1

hatte ich ein ähnliches Bedürfnis. Wenn genügend Zeit zur Verfügung steht, würde ich wahrscheinlich die Funktion "Zusammenfassung" erweitern, um mehrere Aggregate zu unterstützen. Allerdings hatte ich keine Zeit, also machte ich eine Art schmutzige Arbeit.

Anstatt zu versuchen, zwei Zeilen zu erhalten, habe ich summaryType als Funktion verwendet und den Wert als Zeichenfolge mit einem BR-Tag zurückgegeben. Es ist definitiv klobig, aber es funktioniert für das, was ich brauche.

Etwas wie:

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