Uncaught TypeError: Cannot call method 'insert' of undefined

Question

im pretty new to extjs and having trouble with it

i am using the browser-layout example for my application

im trying to add a form grid to it i defined a new class but when i call my form grid i get this error

Uncaught TypeError: Cannot call method 'insert' of undefined

here is my code:

Ext.define('Ext.app.myFormGrid', {

extend: 'Ext.grid.Panel',
alias: 'widget.formgrid ',
myData: [
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
    ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
    ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
    ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
    ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
    ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
    ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
    ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
    ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
    ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
    ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
],

ds: Ext.create('Ext.data.ArrayStore', {
    fields: [
        { name: 'company' },
        { name: 'price', type: 'float' },
        { name: 'change', type: 'float' },
        { name: 'pctChange', type: 'float' },
        { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },
    // Rating dependent upon performance 0 = best, 2 = worst
        {name: 'rating', type: 'int', convert: function (value, record) {
            var pct = record.get('pctChange');
            if (pct < 0) return 2;
            if (pct < 1) return 1;
            return 0;
        } 
    }
    ],
    data: this.myData
}),


change : function (val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '</span>';
    }
    return val;
},

pctChange: function (val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '%</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
},


rating: function (v) {
    if (v == 0) return "A";
    if (v == 1) return "B";
    if (v == 2) return "C";
},

initComponent: function () {
    var gridForm = Ext.create('Ext.form.Panel', {
        id: 'company-form',
        frame: true,
        title: 'Company data',
        bodyPadding: 5,
        width: 750,
        layout: 'column',    // Specifies that the items will now be arranged in columns

        fieldDefaults: {
            labelAlign: 'left',
            msgTarget: 'side'
        },

        items: [{
            columnWidth: 0.60,
            xtype: 'gridpanel',
            store: this.ds,
            height: 400,
            title: 'Company Data',

            columns: [
            {
                id: 'company',
                text: 'Company',
                flex: 1,
                sortable: true,
                dataIndex: 'company'
            },
            {
                text: 'Price',
                width: 75,
                sortable: true,
                dataIndex: 'price'
            },
            {
                text: 'Change',
                width: 75,
                sortable: true,
                renderer: this.change,
                dataIndex: 'change'
            },
            {
                text: '% Change',
                width: 75,
                sortable: true,
                renderer: this.pctChange,
                dataIndex: 'pctChange'
            },
            {
                text: 'Last Updated',
                width: 85,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            },
            {
                text: 'Rating',
                width: 30,
                sortable: true,
                renderer: this.rating,
                dataIndex: 'rating'
            }
        ],

            listeners: {
                selectionchange: function (model, records) {
                    if (records[0]) {
                        this.up('form').getForm().loadRecord(records[0]);
                    }
                }
            }
        }, {
            columnWidth: 0.4,
            margin: '0 0 0 10',
            xtype: 'fieldset',
            title: 'Company details',
            defaults: {
                width: 240,
                labelWidth: 90
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Name',
                name: 'company'
            }, {
                fieldLabel: 'Price',
                name: 'price'
            }, {
                fieldLabel: '% Change',
                name: 'pctChange'
            }, {
                xtype: 'datefield',
                fieldLabel: 'Last Updated',
                name: 'lastChange'
            }, {
                xtype: 'radiogroup',
                fieldLabel: 'Rating',
                columns: 3,
                defaults: {
                    name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
                },
                items: [{
                    inputValue: '0',
                    boxLabel: 'A'
                }, {
                    inputValue: '1',
                    boxLabel: 'B'
                }, {
                    inputValue: '2',
                    boxLabel: 'C'
                }]
            }]
        }],
        //renderTo: bd
    });


    //gridForm.child('gridpanel').getSelectionModel().select(0);

},

});

then in my main file , i create my form grid and add it to my tabpanel:

...

var myPanel =  Ext.create('Ext.app.myFormGrid',{title : 'panel 2',height:250});

...

xtype : 'tabpanel',

...

thanks for ur time and help

Answer 1

You can also get this error if you define a component's initComponent function without calling this.callParent(arguments); inside of it.

Clearly that wasn't the case for you but just pointing this out for others.