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
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)
second file(rest of code)
and the Ext.create in your main View:
…
Just to explain why I have sead that before: HERE!