Sencha - Добавить новое поле формы. Sencha форма с помощью кнопки - пользователь активирует

Question

Хорошо, я, наверное, здесь упускаю что-то простое, но я хотел посмотреть, может ли кто-нибудь уловить, что здесь происходит не так. Моя цель - дать пользователю возможность добавить новый ингредиент (через новое текстовое поле в моей форме рецепта), нажав кнопку в форме на основе сенчи.

Кроме того, имя текстового поля (подлежащего отправке) необходимо увеличить на 1, чтобы отправка в базу данных MySQL работала должным образом, т.е. ингредиенты2, ингредиенты3 ... вот что я имею до сих пор (без модели), также обратите внимание Я жестко закодировал поля, но спрятал их для тестирования:

        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();
                                }},

                ]

            }
        ],

Я получаю сообщение об ошибке: Uncaught TypeError: Невозможно прочитать свойство 'items' с неопределенным значением

Спасибо за любую помощь! - BRR

Answer 1

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

Эта запятая после labelWidth сломается, не так ли?

Answer 2

В строке p = formBase.fs.items.items + 1;Поле fs не определено как свойство переменной formBase, поэтому оно не разрешается (поэтому оно не определено).Поэтому, когда вы пытаетесь сослаться на «элементы» внутри «fs», вы получаете ошибку.(вы пытаетесь сослаться на элементы внутри fs, а fs не определено).