1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

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

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


    Say I have a form like this:

    Code:
    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.

  2. You should get the values of your form:

    Code:
    form.getValues()
    Or if you just want numberfields:

    Code:
    var fields = form.query('numberfield'),
        f = 0,
        fNum = fields.length,
        sum = 0;
    
    for (; f < fNum; f++) {
        sum += fields[f].getValue();
    }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3521
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You should get the values of your form:

    Code:
    form.getValues()
    Or if you just want numberfields:

    Code:
    var fields = form.query('numberfield'),
        f = 0,
        fNum = fields.length,
        sum = 0;
    
    for (; f < fNum; f++) {
        sum += fields[f].getValue();
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    I get:

    Uncaught ReferenceError: form is not defined

    For the line:
    Code:
    	form.getValues();
    Which is inside the handler function of my button on my form - as can be seen in the code snippet above.

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


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

    You wrote:

    Code:
    for (; f < fNum; f++) {
    Should that be:

    Code:
    for(f=0; f<fNum; f++){
    ?

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

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3521
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by marc.gayle View Post
    I get:

    Uncaught ReferenceError: form is not defined

    For the line:
    Code:
    	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.

    Quote Originally Posted by marc.gayle View Post
    By the way, your for loop seems to be missing an initial parameter.

    You wrote:

    Code:
    for (; f < fNum; f++) {
    Should that be:

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You will need to resolve the form of course.
    What does that mean? How do I go about resolving the form?

    Quote Originally Posted by mitchellsimoens View Post
    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.

  8. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3521
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    No, it's valid JavaScript.

    You can do something like btn.up('formpanel') to resolve the form.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    This is my code snippet:
    Code:
    				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.

  10. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3521
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    btn is the argument of the handler...

    Code:
    handler : function(btn) {
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  11. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
    marc.gayle is on a distinguished road

      0  

    Default


    Still no dice.

    I simplified the code to be:

    Code:
    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();'

Thread Participants: 1