Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
      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
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    No, it's valid JavaScript.

    You can do something like btn.up('formpanel') to resolve the form.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  9. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    btn is the argument of the handler...

    Code:
    handler : function(btn) {
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  11. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    63
    Vote Rating
    0
      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();'

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •