How do I do a simple calculation with the input from a form field?

[marc.gayle]

Say I have a form like this:

Ext.define('MyApp.view.Skidmark', {
    extend: 'Ext.form.FormPanel',
    xtype: 'skidmark',
    config: {
        items: [{
            xtype: 'fieldset',
            title: 'Step 1: Simple Addition',
            items: [{
                xtype: 'numberfield',
                name: 'Num1',
                label: 'First Number'
            },{
                xtype: 'numberfield',
                name: 'Num2',
                label: 'Second Number'
            },{
                xtype: 'numberfield',
                name: 'Num3',
                label: 'Third Number'
            },{
                xtype: 'numberfield',
                name: 'Num4',
                label: 'Fourth Number'
            },{
                xtype: 'button',
                name: 'Calc',
                ui: 'Confirm',
                text: 'Calculate Simple Addition',
                handler: function() {
                    var sum = Num1 + Num2 + Num3 + Num4;
                    Ext.getCmp('Sum').setValue(sum);
                }
            }]
        }

How do I do this simple calculation with the inputs received from the form field, right in the app. All I want to do is be able to access the value in items 1 - 4, and sum them.

Another thing I will want to do is to determine the number of fields that have an entry, so say there are 4 fields, but only 2 are entered....and I want to divide the sum by the number of fields. How would I detect that? Is there a built-in method that allows me to detect how many fields are not nil?

Thanks.

Edit: Btw, I know that I will eventually be doing this calculation in my model or controller - and not in the view - but for right now, I am just trying to get the barebones functionality done.

[mitchellsimoens]

You should get the values of your form:

form.getValues()

Or if you just want numberfields:

var fields = form.query('numberfield'),
    f = 0,
    fNum = fields.length,
    sum = 0;

for (; f < fNum; f++) {
    sum += fields[f].getValue();
}

[marc.gayle]

I get:

Uncaught ReferenceError: form is not defined

For the line:

	form.getValues();

Which is inside the handler function of my button on my form - as can be seen in the code snippet above.

[marc.gayle]

By the way, your for loop seems to be missing an initial parameter.

You wrote:

for (; f < fNum; f++) {

Should that be:

for(f=0; f<fNum; f++){

?

Or is that first semi-colon not a mistake? Looks a bit quirky to me.

[mitchellsimoens]

I get:

Uncaught ReferenceError: form is not defined

For the line:

	form.getValues();

Which is inside the handler function of my button on my form - as can be seen in the code snippet above.

You will need to resolve the form of course.

By the way, your for loop seems to be missing an initial parameter.

You wrote:

for (; f < fNum; f++) {

Should that be:

for(f=0; f<fNum; f++){

?

Or is that first semi-colon not a mistake? Looks a bit quirky to me.

Check out the variables above the for loop, it's there.

[marc.gayle]

You will need to resolve the form of course.

What does that mean? How do I go about resolving the form?

Check out the variables above the for loop, it's there.

I know, I saw it...but was wondering if the single errant ';' at the beginning of the for loop, could be causing the error.

[mitchellsimoens]

No, it's valid JavaScript.

You can do something like btn.up('formpanel') to resolve the form.

[marc.gayle]

This is my code snippet:

				handler: function() {
					btn.up('formpanel')
					form.getValues();
					var fields = form.query('numberfields'),
					    f = 0,
					    fNum = fields.length,
					    sum = 0;


					for (; f < fNum; f++) {
					    sum += fields[f].getValue();
					}

But this is the error I am getting:

Uncaught ReferenceError: btn is not defined

Can you show me some docs or something about what it is that I am doing....because this is not working and I am not understanding what I am doing.

I tried searching for 'resolving a form' in the docs, but that didn't work. Neither did I find anything about resolving the form in the 'Using Forms' docs.

[mitchellsimoens]

btn is the argument of the handler...

handler : function(btn) {

[marc.gayle]

Still no dice.

I simplified the code to be:

handler: function(btn) {
	btn.up('formpanel');
	var values = form.getValues();
	Ext.Msg.alert(values);
}

That is STILL throwing the error:

Uncaught ReferenceError: form is not defined

At the line that includes 'form.getValues();'