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
