TypeError occurs when instantiating an instance of my extended Ext JS FormPanel

I have the following FormPanel in my javascript

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',
        n开发者_如何学JAVAame: 'testplan'
    }, {
        fieldLabel: 'Scheduled Time',
        name: 'scheduledtime'
    }],

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

When I try to create an instance of this with the following code:

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

The following exception occurs:

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

I can't see anything that is wrong. If I take out the header: false call, the same thing happens, so that's not it.

What am I doing wrong?

This may not be the best fix, but it removed the js error for me.

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);

You are not extending the component properly. Your code is missing two major pieces:

1. initComponent : {} //this is where your items should go for "default" configs
2. Register the xtype
   Ext.reg("myRequestForm","EditRequestForm");

Please refer to the ExtJS tutorial for extending components at this link

The data you are passing to Ext.extend should be passed to the form constructor. It appears you are not trying creating a new class with the data you pass to Ext.extend; rather it appears you are trying to instantiate a form object. Try this:

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'
        }]
    });