Sencha - Add new form field Sencha form using button - user activates

Question

Ok, I'm probably missing something basic here but I wanted to see if someone can catch what is going wrong here. My goal is to have the user be able to add a new ingredient (via new textfield in my recipe form) by clicking a button in the Sencha-based form.

Also the textfield name (to be submitted) needs to be incremented by 1 so the submission to the MySQL database works properly, i.e. ingredients2, ingredients3 ...here is what I have so far (without the model), Also notice I have hardcoded the fields bu have hidden them for testing purposes:

        var formBase = {
        scroll: 'vertical',
        url   : 'server.php',
        standardSubmit : false,
        items: [
            {
                xtype: 'fieldset',
                title: 'Add Recipe',
                ref: 'fs',
                //instructions: 'Please enter the information above.',
                defaults: {
                    required: true,
                    labelAlign: 'left',
                    labelWidth: '40%',
                },

                items: [

                {
                    xtype: 'textfield',
                    name : 'name',
                    label: 'Recipe Name',
                    useClearIcon: true,
                    autoCapitalize : false
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients',
                    label: 'Ingredients',
                    useClearIcon: true,
                    autoCapitalize : false
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients2',
                    label: 'Ingredients 2',
                    useClearIcon: true,
                    autoCapitalize : false,
                    hidden: true
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients3',
                    label: 'Ingredients 3',
                    useClearIcon: true,
                    autoCapitalize : false,
                    hidden: true
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients4',
                    label: 'Ingredients 4',
                    useClearIcon: true,
                    autoCapitalize : false,
                    hidden: true
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients5',
                    label: 'Ingredients 5',
                    useClearIcon: true,
                    autoCapitalize : false,
                    hidden: true
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients6',
                    label: 'Ingredients 6',
                    useClearIcon: true,
                    autoCapitalize : false,
                    hidden: true
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients7',
                    label: 'Ingredients 7',
                    useClearIcon: true,
                    autoCapitalize : false,
                    hidden: true
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients8',
                    label: 'Ingredients 8',
                    useClearIcon: true,
                    autoCapitalize : false,
                    hidden: true
                },
                {
                    xtype: 'textfield',
                    name : 'ingredients9',
                    label: 'Ingredients 9',
                    useClearIcon: true,
                    autoCapitalize : false,
                    hidden: true
                },
                {
                    xtype: 'textareafield',
                    name : 'comments',
                    label: 'Comments',
                    maxLength: 50,
                    maxRows: 5,
                    height: 120
                },
                {
                    xtype: 'emailfield',
                    name : 'email',
                    label: 'Email',
                    placeHolder: 'user@foo.com',
                    useClearIcon: true
                },
                {
                                xtype:'button',
                                text: 'Add Ingredient',
                                handler: function() {

                                 var p = formBase.fs.items.items + 1;
                                   formBase.fs.insert(p, {  
                                        xtype: 'textfield',
                                        name : 'ingredients',
                                        label: 'Added field'
                                   });
                                   formBase.fs.doLayout();
                                }},

                ]

            }
        ],

The error I am receiving is: Uncaught TypeError: Cannot read property 'items' of undefined

Thanks for any and all help! - BRR

Answer 1

On the line p= formBase.fs.items.items + 1; The field fs is not defined as a property on the formBase variable, so it is not being resolved (thus it is undefined). Therefore when attempting to reference 'items' within 'fs' you are getting an error. (you are attempting to reference items within fs, and fs is undefined).

Answer 2

    defaults: {
                required: true,
                labelAlign: 'left',
                labelWidth: '40%',
            },

That comma after labelWidth would break it wouldn't it?