Search code examples
javascriptextjsformpanel

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',
        name: '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?


Solution

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