Class 未捕获类型错误：无法调用方法'；插入'；未定义的

我对extjs还很陌生，有点麻烦

我正在使用我的应用程序的例子

我想给它加一个 我定义了一个新类，但是当我调用我的表单网格时，我得到了这个错误

未捕获类型错误：无法调用未定义的方法“insert”

这是我的密码：

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

},

});

感谢您的时间和帮助

好的

首先，您需要定义一个类，在这个类中，您将放入示例中的“var formGrid”，仅此而已。所有其他的东西，myData和逻辑都将在一个单独的文件中。然后，您将在items中说，“创建”您定义的类。所以，并不是来自示例的所有数据都在类（define）中，而是只有带有网格的面板。我试过这个，它对我有效

这里：第一个文件（类）

第二个文件（代码的其余部分）

我只是想解释一下我以前为什么这么做：

---

如果定义组件的

initComponent

函数而不调用

this.callParent（参数），也会出现此错误在它里面

显然，这不是你的情况，只是为其他人指出了这一点。
但这是一个单独的文件，我的主文件是layout-browser.js，我需要在其中的选项卡中添加这个（和其他）。ext.app，因为我在门户示例中基于我的portlet代码。如果不是clair，请随意问我其他问题。我对这一切都很陌生，无法掌握。我不知道ext.app的工作原理，已经用简单面板和简单网格完成了。我如何连接第二个文件和第一个文件？我的意思是，我在哪里调用第二个文件？只需使用html，您的类将手动加载dinamicaly和其余代码。谢谢，这对我很有帮助！这是正确的答案。被接受的答案有很好的信息，但是显示了一种糟糕的设置配置风格（将它们放在原型上），但这才是真正的问题。在重写继承的方法时，我仍然忘了太频繁地调用
this.callParent（）
。
...

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

...

xtype : 'tabpanel',

...

Ext.define("app.formGrid",{
    extend:"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: 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 : change,
                dataIndex: 'change'
            },
            {
                text   : '% Change',
                width    : 75,
                sortable : true,
                renderer : 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: 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'
            }]
        }]
    }],

});

Ext.QuickTips.init();

var bd = Ext.getBody();

// sample static data for the store
var 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'],
    ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
    ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
    ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
    ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
    ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
    ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
    ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
    ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
    ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
    ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
    ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
    ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
    ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
    ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
    ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
    ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
    ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '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']
];

var 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: myData
});


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

// render rating as "A", "B" or "C" depending upon numeric value.
function rating(v) {
    if (v == 0) return "A";
    if (v == 1) return "B";
    if (v == 2) return "C";
}


bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});

/*
 * Here is where we create the Form
 */



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

    items:[Ext.create("app.formGrid",{
            })]

II. Naming Conventions

1) Classes

  Classes that are not distributed by Sencha should never use Ext as the top-level namespace.