本文介绍了Uncaught TypeError：无法调用未定义的方法'插入'的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用我的应用程序示例
im试图将添加到它
i定义了一个新的类，但是当我打电话给我的表格网格时，我得到这个错误
$ b p> 未捕获TypeError：无法调用方法'insert'undefined
这是我的代码：
Ext.define （'Ext.app.myFormGrid'，{
extend：'Ext.grid.Panel'，
别名：'widget.formgrid'，
myData：[
['3m Co'，71.72,0.02,0.03，'9/1 12:00 am']，
['Alcoa Inc'，29.01,0.42,1.47，'9/1 12:00 am']，
['Altria Group Inc'，83.81,0.28,0.34，'9/1 12:00 am']，
['美国运通公司'，5美国国际集团公司'，64.13,0.31,0.99，'9/1 12:00 am']，
'美国国际集团公司' ['AT& T Inc.'，31.61，-0.48，-1.54，'9/1 12:00 am']，
['Boeing Co.'，75.43,0.53,0.71，'9/1 12： 00am']，
['Caterpillar Inc.'，67.27,0.92,1.39，'9/1 12:00 am']，
['United Technologies Corporation'，63.26,0.55,0.88''9 / 1 12:00 am']，
['Verizon Communications'，35.57，0.39，1.11，'9/1 12:00 am']，
['Wal-Mart Stores，Inc.'，45.45 ，0.73,1.63，'9/1 12:00 am']
]，
ds：Ext.create（'Ext.data.ArrayStore'，{
fields：[
{name：'company'}，
{name：'price'，type：'float'}，
{name：'change'，type：'float'}，
{name：'pctChange'，类型：'float'}，
{name：'lastChange'，类型：'date'，dateFormat：'n / jh：ia'}，
//评分取决于perf ormance 0 = best，2 = worst
{name：'rating'，type：'int'，convert：function（value，record）{
var pct = record.get（'pctChange'）;
if（pct if（pct 返回0;
$ b $ {
if（val> 0）{
return'< span style =color：green;>'+ val +'< / span>';
} else if（val return'< span style =color：red;>'+ val +'< / span>';
}
返回val;
}，
pctChange：function（val）{
if（val> 0）{
return'< span style =color：green; >'+ val +'％< / span>';
} else if（val return'< span style =color：red;>'+ val +'％< / span>';
}
返回val;
等级：function（v）{
if（v == 0）returnA;
if（v == 1）返回B;
if（v == 2）返回C;
}，
initComponent：function（）{
var gridForm = Ext.create（'Ext.form.Panel'，{
id：'company-form '，
frame：true，
title：'公司数据'，
bodyPadding：5，
width：750，
layout：'column'，//指定这些项目现在将按列排列
fieldDefaults：{
labelAlign：'left'，
msgTarget：'side'
}，
items：[{
columnWidth：0.60，
xtype：'gridpanel'，
store：this.ds，
height：400，
title：'公司数据'，
栏：[
{
id：'company'，
text：'Company'，
flex：1，
sortable：true，
dataIndex：'company'
}，
{
text：'Price'，
width：75，
sortable：true，
dataIndex：'price'
}，
{
text：'更改'，
width：75，
sortable：true，
渲染器：this.change，
dataIndex：'change'
}，
{
text：'％Change'，
width：75，
sortable：true，
渲染器：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，
渲染器：this.rating，
dataIndex：'rating'
}
]，
听众：{
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：'公司详情'，
默认值：{
width：240，
labelWidth：90
}，
defaultType：'textfield '，
items：[{
fieldLabel：'Name'，
name：'company'
}，{
fieldLabel：'Price'，
名称：'price'
}，{
fieldLabel：'％Change'，
名称：'pctChange'
}，{
xtype：'datefield'，
fieldLabel：'最后更新'，
名称：'lastChange'
}，{
xtype：'radiogroup'，
fieldLabel：'Rating'，
列：3，
默认值：{
name：'rating'//每个电台都有相同的名称，以便浏览器确保一次只检查一个
}，
items：[{
inputValue：'0'，
boxLabel：'A'
}，{
inputValue：'1'，
boxLabel：'B'
}，{
inputValue：'2'，
boxLabel：'C'
}]
}]
}]，
// renderTo：bd
}）;
//gridForm.child('gridpanel').getSelectionModel().select(0）;
}，
}）;
然后在我的主文件中，我创建我的表单网格并将其添加到我的tabpanel：
...
var myPanel = Ext.create（'Ext.app.myFormGrid'，{title： 'panel 2'，height：250}）;
...
xtype：'tabpanel'，
...
感谢您的时间和帮助
解决方案
首先，您需要定义一个类，在这个类中，您将从示例中放置var formGrid，但仅限于此。所有其他的东西，myData和逻辑都将在一个单独的文件中。然后你会在项目中说创建你定义的类。因此，并非来自示例的所有数据都将在课堂上（定义），而只是带有网格的面板。我试试这个，它适用于我。
在这里：第一个文件（类）
Ext.define（app.formGrid，{
extend：Ext.form.Panel，
id：'company-form'，
frame：true，
title：'公司数据'，
bodyPadding：5，
宽度：750，
layout：'column'，//指定项目现在按列排列
fieldDefaults：{
labelAlign：'left'，
msgTarget：'side'
}，
物品：[{
columnWidth：0.60，
xtype：'gridpanel'，
商店：ds，
身高：400，
标题：'公司数据'，
列：[
{
id：'company'，
text：'Company'，
flex：1，
sortable：true，
dataIndex： '公司'
}，
{
text：'Price'，
width：75，
sortable：true，
dataIndex：'price'
}，
{
text：'更改'，
width：75，
sortable：true，
renderer：change，
dataIndex：'change'
}，
{
text：'％Change'，
width：75，
sortable：true，
渲染器：pctChange，
dataIndex：'pctChange'
}，
{
text：'Last Updated'，
width：85，
sortable：true，
renderer：Ext.util.Format.dateRenderer（'m / d / Y'） ，
dataIndex：'lastChange'
}，
{
text：'Rat ing'，
width：30，
sortable：true，
renderer：rating，
dataIndex：'rating'
}
]，
听众：{
selectionchange：function（model，records）{
if（records [0]）{
this.up（'form'）。getForm（）。 loadRecord（记录[0]）;
}
}
}
}，{
columnWidth：0.4，
margin：'0 0 0 10'，
xtype：' fieldset'，
title：'公司详情'，
默认值：{
width：240，
labelWidth：90
}，
defaultType：'textfield '，
items：[{
fieldLabel：'Name'，
name：'company'
}，{
fieldLabel：'Price'，
名称：'price'
}，{
fieldLabel：'％Change'，
名称：'pctChange'
}，{
xtype：'datefield'，
fieldLabel：'最后更新'，
名称：'lastChange'
}，{
xtype：'radiogroup'，
fieldLabel：'Rating'，
列：3，
默认值：{
名称：'rati ng'//每个电台都有相同的名称，因此浏览器将确保一次只检查一个
}，
项目：[{
inputValue：'0'，
boxLabel：'A'
}，{
inputValue：'1'，
boxLabel：'B'
}，{
inputValue：'2'，
boxLabel：'C'
}]
}]
}]，
}）;
第二个文件（其余代码）
Ext.QuickTips.init（）;
var bd = Ext.getBody（）;
//商店的静态数据示例
var myData = [
['3m Co'，71.72，0.02，0.03，'9/1 12:00 am']，
['Alcoa Inc'，29.01，0.42，1.47，'9/1 12:00 am']，
['Altria Group Inc'，83.81，0.28，0.34，'9/1 12:00 am ''，
['American Express Company'，52.55,0.01,0.02，'9/1 12:00 am']，
['American International Group，Inc.'，64.13，0.31，0.49， '9/1 12:00 am']，
['AT& T Inc.'，31.61，-0.48，-1.54，'9/1 12:00 am']，
['Boeing Co. '，75.43,0.53,0.71，'9/1 12:00 am']，
['Caterpillar Inc.'，67.27,0.92,1.39，'9/1 12:00 am']，
[ 'Citigroup，Inc.'，49.37,0.02,0.04，'9/1 12:00 am']，
['EI杜邦公司'，40.48,0.51,1.28，'9/1 12:00 am']，
['Exxon Mobil Corp'，68.1，-0.43，-0.64，'9/1 12:00 am ''，
['General Electric Company'，34.14，-0.08，-0.23，'9/1 12:00 am']，
['General Motors Corporation'，30.27,1.09,3.74'' 9/1 12:00 am']，
['Hewlett-Packard Co.'，36.53，-0.03，-0.08，'9/1 12:00 am']，
['Honeywell Intl Inc' ，38.77,0.05,0.13，'9/1 12:00 am']，
['Intel Corporation'，19.88,0.31,1.58，'9/1 12:00 am']，
['International Business Machines'，81.41,0.44,0.54，'9/1 12:00 am']，
['Johnson& Johnson'，64.72,0.06,0.09，'9/1 12:00 am']，
['JP Morgan&大通& Co'，45.73,0.07,0.15，'9/1 12:00 am']，
['麦当劳公司'，36.76,0.86,2.40，'9/1 12:00 am']，
['Merck&有限公司'，40.96,0.41,1.01，'9/1 12:00 am']，
['Microsoft Corporation'，25.84,0.14,0.54，'9/1 12:00 am']，
['辉瑞公司'，27.96,0.4,1.45，'9/1 12:00 am']，
['可口可乐公司'，45.07,0.26,0.58，'9/1 12： 00am']，
['Home Depot，Inc.'，34.64,0.35,1.02，'9/1 12:00 am']，
['The Procter& Gamble Company'，61.91,0.01,0.02，'9/1 12:00 am']，
['United Technologies Corporation'，63.26,0.55,0.88，'9/1 12:00 am']，
''Verizon Communications'，35.57,0.39,1.11，'9/1 12:00 am']，
['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 / jh：ia'}，
//评级取决于表现0 =最好，2 =最差
{名称：' （'pctChange'）;
如果（pct if if（pct return 0;
}}
]，
data：myData
}）;
//自定义渲染器函数示例
函数变化（val）{
if（val> 0）{
return'< span style =color：green;>'+ val +'< / span>';
} else if（val return'< span style =color：red;>'+ val +'< / span>';
}
返回val;
}
//自定义渲染器函数示例
函数pctChange（val）{
if（val> 0）{
return'< span style =颜色：绿色;>'+ val +'％< / span>';
} else if（val return'< span style =color：red;>'+ val +'％< / span>';
}
返回val;
}
//根据数值呈现评分为A，B或C。
函数评级（v）{
if（v == 0）返回A;
if（v == 1）返回B;
if（v == 2）返回C; $ {
}
bd.createChild（{tag：'h2'，html：'使用带表格的网格'}）;
/ *
*这里是我们创建Form
* /
的地方gridForm.child（'gridpanel ）.getSelectionModel（）选择（0）。
和主视图中的Ext.create：
...
项目：[Ext.create（app.formGrid，{
}）]
只是为了解释为什么我之前有sead：
II。命名约定
1）类
不由Sencha分发的类不应该使用Ext作为顶级名称空间。
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 iti 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
解决方案
Ok,
first, you need to define a class, in this class you will put the "var formGrid" from example, only that. All the other stuff, myData, and logics are going to be in a separate file. Then you will say in items, "Create" the class that you have defined. So, not all data from example is going to be in class(define), but only the panel with the grid. I try this and it works for me.
here: first file(class)
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'
}]
}]
}],
});
second file(rest of code)
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);
and the Ext.create in your main View:...
items:[Ext.create("app.formGrid",{
})]
Just to explain why I have sead that before: HERE!
II. Naming Conventions
1) Classes
Classes that are not distributed by Sencha should never use Ext as the top-level namespace.
这篇关于Uncaught TypeError：无法调用未定义的方法'插入'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！