I am new to ExtJs and I am trying to follow this tutorial:
http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture
However, when I get to the part where the grid is actually suppose to become visible, I get an error in the Javascript console that says: “Type error: name is undefined”.
I have the following files,
app.js:
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userList'
}
});
}
});
app/controller/Users.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'],
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('This panel was rendered');
}
});
app/view/user/List.js
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
and of course Index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="ExtJs/ext-4.1.1a/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/ext-4.1.1a/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Thanks
You’ve changed the case: