Add values in a form Sencha Touch 2

Question

I have several FormPanel. You can enter values in each of them. I need something to add all those values. Could I do it with a loop or a function? This is my code:

view1.js:

Ext.define('myApp.view.fp2', {
extend: 'Ext.form.Panel',
alias: 'widget.fp2',

config: {
    id: 'fp2',
    styleHtmlContent: true,
    items: [
        {
            xtype: 'fieldset',
            styleHtmlContent: true,
            title: 'Prueba 3',
            items: [
                {
                    xtype: 'selectfield',
                    docked: 'bottom',
                    id: 'f3',
                    margin: 10,
                    labelWidth: '0%',
                    autoSelect: false,
                    options: [
                        {
                            text: '0',
                            value: 0
                        },
                        {
                            text: '1',
                            value: 1
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'fieldset',
            styleHtmlContent: true,
            title: 'Prueba 4',
            items: [
                {
                    xtype: 'selectfield',
                    docked: 'bottom',
                    id: 'f4',
                    margin: 10,
                    labelWidth: '0%',
                    autoSelect: false,
                    options: [
                        {
                            text: '0',
                            value: 0
                        },
                        {
                            text: '1',
                            value: 1
                        },
                        {
                            text: '2',
                            value: 2
                        }
                        ]
                }
            ]
        },
        {
            xtype: 'fieldset',
            styleHtmlContent: true,
            title: 'Prueba 5',
            items: [
                {
                    xtype: 'selectfield',
                    docked: 'bottom',
                    id: 'f5',
                    margin: 10,
                    labelWidth: '0%',
                    autoSelect: false,
                    options: [
                        {
                            text: '0',
                            value: 0
                        },
                        {
                            text: '1',
                            value: 1
                        },
                        {
                            text: '2',
                            value: 2
                        },
                        {
                            text: '3',
                            value: 3
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'fieldset',
            html: 'pregunta 6',
            styleHtmlContent: true,
            title: 'Prueba 6',
            items: [
                {
                    xtype: 'selectfield',
                    docked: 'bottom',
                    id: 'f6',
                    margin: 10,
                    labelWidth: '0%',
                    autoSelect: false,
                    options: [
                        {
                            text: '0',
                            value: 0
                        },
                        {
                            text: '1',
                            value: 1
                        }
                    ]
                }
            ]
        }
        {
            xtype: 'button',
            docked: 'bottom',
            itemId: 'button2',
            margin: 10,
            ui: 'forward',
            text: 'siguiente'
            //go to view2.js
        }
    ]
}
});

The view2.js is similar to the view1 but with other values. What is the best way to sum all the values?

Thanks in advance.

Answer 1

To sum? I think you want to fetch them all as key-values?

For each Ext.form.FormPanel call

var valueObj = formRef.getForm().getValues();

If you now want to merge them into one object you can either do

Ext.apply(sumValueObj, valueObj ); // will override already existing props

or

Ext.applyIf(sumValueObj, valueObj ); // will not override already existing props

Answer 2

You can have one function which will sum all the values you need and from change event of all the selectfields you can fire that function.

In controller you can listen to change event like this:

'fp2 selectfield' : {
            change  : 'onDataChange'
},

and in onDataChange method you can do:

var values = Ext.getCmp("fp2").getValues();
// code to add/subtract whatever you want

PS I haven't tested this code so please ignore mistakes