Javascript 实例化扩展Ext JS FormPanel的实例时发生TypeError

我的javascript中有以下FormPanel

EditRequestForm = Ext.extend(Ext.form.FormPanel, {
    labelWidth: 75,
    bodyStyle: 'padding:5px 5px 0',
    width: 350,
    defaults: { width: 230 },

    items: [{
        name: 'id',
        hidden: true
    }, {
        fieldLabel: 'Name',
        name: 'name',
        allowBlank: false
    }, {
        fieldLabel: 'Test Plan File',
        name: 'testplan'
    }, {
        fieldLabel: 'Scheduled Time',
        name: 'scheduledtime'
    }],

    buttons: [{
        text: 'Save'
    }, {
        text: 'Cancel'
    }]
});

当我尝试使用以下代码创建此实例时：

        var form = new EditRequestForm({
            header: false
        });

出现以下异常：

Uncaught TypeError: Object [object Object],[object Object],[object Object],[object Object] has no method 'add'

我看不出有什么不对劲。如果我去掉

标题：false

调用，同样的事情也会发生，所以不是这样

---

我做错了什么？

传递给Ext.extend的数据应该传递给表单构造函数。看起来您并没有尝试使用传递给Ext.extend的数据创建新类；相反，您似乎正在尝试实例化一个表单对象。试试这个：

EditRequestForm = new Ext.form.FormPanel({
        labelWidth: 75,
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        defaults: { width: 230 },

        items: [{
            name: 'id',
            hidden: true
        }, {
            fieldLabel: 'Name',
            name: 'name',
            allowBlank: false
        }, {
            fieldLabel: 'Test Plan File',
            name: 'testplan'
        }, {
            fieldLabel: 'Scheduled Time',
            name: 'scheduledtime'
        }],

        buttons: [{
            text: 'Save'
        }, {
            text: 'Cancel'
        }]
    });

---

传递给Ext.extend的数据应传递给表单构造函数。看起来您并没有尝试使用传递给Ext.extend的数据创建新类；相反，您似乎正在尝试实例化一个表单对象。试试这个：

EditRequestForm = new Ext.form.FormPanel({
        labelWidth: 75,
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        defaults: { width: 230 },

        items: [{
            name: 'id',
            hidden: true
        }, {
            fieldLabel: 'Name',
            name: 'name',
            allowBlank: false
        }, {
            fieldLabel: 'Test Plan File',
            name: 'testplan'
        }, {
            fieldLabel: 'Scheduled Time',
            name: 'scheduledtime'
        }],

        buttons: [{
            text: 'Save'
        }, {
            text: 'Cancel'
        }]
    });

---

这可能不是最好的修复方法，但它为我消除了js错误

EditRequestForm = Ext.extend(Ext.form.FormPanel, {
        labelWidth: 75,
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        defaults: {
            width: 230
        },
        initComponent: function () {
            Ext.apply(this, {
                renderTo: Ext.getBody(),
                items: [{
                    name: 'id',
                    hidden: true
                },
                {
                    fieldLabel: 'Name',
                    name: 'name',
                    allowBlank: false
                },
                {
                    fieldLabel: 'Test Plan File',
                    name: 'testplan'
                },
                {
                    fieldLabel: 'Scheduled Time',
                    name: 'scheduledtime'
                }],
                buttons: [{
                    text: 'Save'
                },
                {
                    text: 'Cancel'
                }]
            });
            EditRequestForm.superclass.initComponent.apply(this, arguments);

---

这可能不是最好的修复方法，但它为我消除了js错误

EditRequestForm = Ext.extend(Ext.form.FormPanel, {
        labelWidth: 75,
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        defaults: {
            width: 230
        },
        initComponent: function () {
            Ext.apply(this, {
                renderTo: Ext.getBody(),
                items: [{
                    name: 'id',
                    hidden: true
                },
                {
                    fieldLabel: 'Name',
                    name: 'name',
                    allowBlank: false
                },
                {
                    fieldLabel: 'Test Plan File',
                    name: 'testplan'
                },
                {
                    fieldLabel: 'Scheduled Time',
                    name: 'scheduledtime'
                }],
                buttons: [{
                    text: 'Save'
                },
                {
                    text: 'Cancel'
                }]
            });
            EditRequestForm.superclass.initComponent.apply(this, arguments);

---

您没有正确扩展组件。您的代码缺少两个主要部分：

initComponent:{}//这是您的项应该用于“默认”配置的地方

注册xtype

Ext.reg（“myRequestForm”、“EditRequestForm”）

---

如果您没有正确扩展组件，请参阅ExtJS教程中的扩展组件。您的代码缺少两个主要部分：

initComponent:{}//这是您的项应该用于“默认”配置的地方

注册xtype

Ext.reg（“myRequestForm”、“EditRequestForm”）

---

关于扩展组件，请参阅ExtJS教程，网址为

，为什么我不能扩展它？在我准备好使用它之前，我不希望表单被实例化，我希望它不存在于两个实例化之间。我可以把它包装成一个函数来返回它，但是扩展它似乎应该是正确的方法。你可以扩展它。但是，您不会覆盖项-当您覆盖类中的项时，构造函数会不高兴。许多人使用Ext.extend覆盖参数和方法，但不应覆盖项。为什么要扩展？是否要创建多个EditRequestForms？如果没有，那么我建议您可以简单地实例化。我一次只会有一个活动的，所以从技术上来说这很好。不过，我更感兴趣的是为什么我的扩展无法工作，因为FormPanel还有其他用途，我需要相同表单的多个实例。从上述代码中删除项并将其传递给构造函数。IMHO，所有五个参数都应该传递给构造函数，但是项是你现在最大的问题。为什么我不能扩展它呢？在我准备好使用它之前，我不希望表单被实例化，我希望它不存在于两个实例化之间。我可以把它包装成一个函数来返回它，但是扩展它似乎应该是正确的方法。你可以扩展它。但是，您不会覆盖项-当您覆盖类中的项时，构造函数会不高兴。许多人使用Ext.extend覆盖参数和方法，但不应覆盖项。为什么要扩展？是否要创建多个EditRequestForms？如果没有，那么我建议您可以简单地实例化。我一次只会有一个活动的，所以从技术上来说这很好。不过，我更感兴趣的是为什么我的扩展无法工作，因为FormPanel还有其他用途，我需要相同表单的多个实例。从上述代码中删除项并将其传递给构造函数。IMHO，所有五个参数都应该传递给构造函数，但项是您现在最大的问题。这基本上是正确的。。。不过，您需要分配新的xtype@请注意对象的配置是如何包含在initComponent部分中的。请参考这个URL上的ExtJS教程：这似乎是最好的答案。但是，您永远不应该在原型中放置对象，因此默认值也需要移动到initComponent中。如果你重写构造函数（在超类之后应用），那么如果你需要的话，你的配置就会出现在initialConfig中。这基本上是正确的。。。不过，您需要分配新的xtype@请注意对象的配置是如何包含在initComponent部分中的。请参考这个URL上的ExtJS教程：这似乎是最好的答案。但是，您永远不应该在原型中放置对象，因此默认值也需要移动到initComponent中。如果您重写构造函数（在超类之后应用），那么如果您需要，您的配置将显示在initialConfig中。