Question

Following is my code to show a grid panel with total cost summary. I want to show another summary row with average. So any help?

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

Thanks in advance

Answer 1

I had a similar need. Given enough time, I’d probably just extend the Summary feature to support multiple aggregates. However, I didn’t have time, so I did a kind of dirty work-around.

Instead of try to get two rows, I just used summaryType as a function, and returned the value as a string with a BR tag. It’s definitely clunky, but it works for what I need.

Something like:

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