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

时间:2011-05-23 19:32:56

标签: javascript forms extjs

好的,我可能会遗漏一些基本的东西,但我想知道是否有人可以发现这里出了什么问题。我的目标是让用户能够通过单击基于Sencha的表单中的按钮添加新配料(通过我的配方表单中的新文本字段)。

此外,文本域名称(待提交)需要增加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();
                                }},

                ]

            }
        ],

我收到的错误是:未捕获的TypeError:无法读取未定义的属性'items'

感谢您的帮助! - BRR

2 个答案:

答案 0 :(得分:1)

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

labelWidth之后的那个逗号会破坏它吗?

答案 1 :(得分:0)

在线p = formBase.fs.items.items + 1; 字段fs未定义为formBase变量上的属性,因此未解析(因此未定义)。因此,当尝试在'fs'中引用'items'时,您会收到错误。 (您试图引用fs中的项目,并且fs未定义)。