Javascript Sencha-使用按钮添加新表单字段Sencha表单-用户激活

好吧，我可能遗漏了一些基本的东西，但我想看看是否有人能发现这里出了什么问题。我的目标是让用户能够通过单击基于Sencha的表单中的按钮添加新成分（通过我配方表单中的新文本字段）

此外，textfield name（待提交）需要增加1，以便提交到MySQL数据库正常工作，即ingredients2、ingredients3……这是我迄今为止所拥有的（没有模型），还请注意，我已硬编码字段，但出于测试目的，已将其隐藏：

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

                ]

            }
        ],

我收到的错误是：UncaughtTypeError:无法读取未定义的属性“items”

谢谢你的帮助BRR

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

---

labelWidth后面的逗号会打断它，不是吗？

行p=formBase.fs.items.items+1；

---

字段fs未定义为formBase变量的属性，因此未对其进行解析（因此未定义）。因此，当尝试引用“fs”中的“items”时，您会得到一个错误。（您正在尝试引用fs中的项目，而fs未定义）。

否，这不会影响它，但感谢您的帮助。还有其他想法吗？你有没有更完整的例子？一些随机对象（不是全部）使它有点困难。异常发生在哪一行（我猜是在var p位，因为这感觉有点奇怪，但这是猜测工作）？我不确定您是否可以只使用var p=formBase.fs.items.items+1；在这样一个物体里面，也许你在寻找。。。var p=计数（formbase…）；实际上，这是一个非常完整的示例——其余的只是构建页面上的其他面板。异常发生在您提到的行（var p…），我相信您是正确的，我需要某种计数函数。我最终推出了自己的功能，启动了一个不同的停靠按钮；虽然不漂亮，但已经完成了任务。如果你想看的话，我可以把它贴出来——这条评论太长了。