Sum value Sencha Touch

Question

hi I made a list that has a productname and price the list is an item of a panel en the panel has a dockeditem which is a toolbar. i want the sum of price inside the toolbar so that people can see the total price.

my code:

new Ext.Panel({
        layout: 'fit',
        flex: 1,
        items: [
            new Ext.List({
            layout: 'fit',
            title: 'Winkelwagen',
            store: NestedListDemo.Winkelwagen_Store,
            flex: 1,
            itemTpl : '{title} €{prijs}'
        })],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            title: 'Totaal'
            }]
        })

My store:

NestedListDemo.Winkelwagen_Store = new Ext.data.JsonStore({

model: 'ListProductItem',
storeId: 'WinkelwagenStore',
data: [

],
autoLoad: true
});

Could anyone please tell me how to do that because i have no idea

Andrea Cammarata Andrea Cammarata · Accepted Answer · 2011-05-27T14:06:54

You can use the native Store each function to check all the records price and calculate the sum of them. I post you a simple example that show you how to do that:

Ext.setup({
onReady: function() {

    //Model registration
    Ext.regModel('Item', {
        fields: [
            {name: 'title', type: 'string'},
            {name: 'prijs', type: 'int'}
        ]
    });

    //Registration of the Store
    Ext.regStore('MyStore', {
        model: 'Item',
        data: [
            {title: 'Item 1', prijs: 100},
            {title: 'Item 2', prijs: 200},
            {title: 'Item 3', prijs: 700},
        ],
        autoLoad: true
    });

    //Definition of the main list
    var list = new Ext.List({
        itemTpl : '{title} - {prijs}',
        store: 'MyStore'
    });

    //Definition of the container panel
    var panel = new Ext.Panel({
        fullscreen: true,
        items: list,
        dockedItems: [{
            xtype: 'toolbar',
            itemId: 'mainToolbar',
            items: [{
                xtype: 'button',
                ui: 'action',
                text: 'Sum',
                handler: function(){

                    //Get the Store
                    var store = list.getStore();

                    //Declaring a sum variable
                    var sum = 0;

                    //Calculate the sum
                    store.each(function(item){
                        sum += item.get('prijs');
                    },this);

                    //Show the sum value
                    panel.getDockedComponent('mainToolbar').setTitle('The SUM is: ' + sum);

                }
            }]
        }]
    });
}

});

As you can see the store.each function iterate beetween every record, so you can get the field "prijs" and sum it to your "sum" variable. After that you can take the docked toolbar and set the sum value as it's title.

Hope this helps.

Sum value Sencha Touch

1 Answers