CODEWITHSUNDEEP
extjs
Rick Weller
Rick Weller

Reputation: 1258

How to calculate totals in a grid with the summary function

I have a grid with two summary positions. I have a summary at the end of the grid. This is working great. But what I want is to calculate the total price per row. I have 4 columns called 'Aantal, Stukprijs,korting and Totaal'. What I need is that in the 'Totaal' column this sum: (Aantal X Stukprijs) - %korting(means discount).

This is the code for that grid:

  xtype: 'gridpanel',
                                id: 'materiaalGrid',
                                autoScroll: true,
                                forceFit: true,
                                store: 'MyArrayStore8',
                                columns: [
                                    {
                                        xtype: 'rownumberer'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'naam',
                                        text: 'Naam',
                                        editor: {
                                            xtype: 'combobox'
                                        }
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'type',
                                        text: 'Type'
                                    },
                                    {
                                        xtype: 'numbercolumn',
                                        summaryType: 'sum',
                                        dataIndex: 'gewicht',
                                        text: 'Gewicht'
                                    },
                                    {
                                        xtype: 'numbercolumn',
                                        summaryType: 'sum',
                                        dataIndex: 'aantal',
                                        text: 'Aantal',
                                        editor: {
                                            xtype: 'numberfield'
                                        }
                                    },
                                    {
                                        xtype: 'numbercolumn',
                                        dataIndex: 'stuks',
                                        text: 'Stukprijs'
                                    },
                                    {
                                        xtype: 'numbercolumn',
                                        dataIndex: 'korting',
                                        text: 'Korting',
                                        editor: {
                                            xtype: 'numberfield',
                                            maxValue: 100
                                        }
                                    },
                                    {
                                        xtype: 'numbercolumn',
                                        summaryType: 'sum',
                                        dataIndex: 'stuks',
                                        text: 'Totaal'
                                    },
                                    {
                                        xtype: 'booleancolumn',
                                        dataIndex: 'verkoop',
                                        text: 'Verkoop'
                                    },
                                    {
                                        xtype: 'actioncolumn',
                                        maxWidth: 50,
                                        minWidth: 50,
                                        width: 50,
                                        defaultWidth: 50,
                                        emptyCellText: 'Delete',
                                        menuDisabled: true,
                                        items: [
                                            {
                                                handler: function(view, rowIndex, colIndex, item, e, record, row) {
                                                    var selection = me.getView().getSelectionModel().getSelection()[0];
                                                    if (selection) {
                                                        store.remove(selection);
                                                    }
                                                },
                                                altText: 'Delete'
                                            }
                                        ]
                                    }
                                ],
                                viewConfig: {
                                    enableTextSelection: false
                                },
                                features: [
                                    {
                                        ftype: 'summary'
                                    }
                                ],
                                plugins: [
                                    Ext.create('Ext.grid.plugin.RowEditing', {

                                    })
                                ],

I can only get the sum of aantal and gewicht in the bottom row.

Upvotes: 4

Views: 5373

Answers (1)

overlordhammer
overlordhammer

Reputation: 1333

To solve this specific scenario you can try doing this:

  • For the result of "Aantal X Stukprijs" AKA Quantity X Unit price (thanks God Google translator exists!) you can create a calculated field implementing the convert function on the field declaration, as follows: 
{
        name: 'total',
        type: 'number',
        convert: function(value, record) {
            if(!value) {
                // Only calculate the value if no value set since the
                // Calculated total column will fill this field with a real
                // value we don't want to mess
                value = record.get('price') * record.get('units');
            }            
            return value;
        }
    }
  • This will still leave inconsistencies when changing the record value using the inline editor you will need to add an extra handler for that like this:
    grid.on('edit', function(editor, e) {
           // commit the changes right after editing finished    
           e.record.set('total'); // force total re-calculation
           e.record.commit(); 
   });

You con see a complete example here, hope it helps.

Upvotes: 4

Related Questions