Hello, I am trying to go through this tutorial:
http://docs.sencha.com/ext-js/4-0/#!...n_architecture
I am getting to the part where the view is supposed to become visible, however, instead I get an error in the console that says 'TypeError: name is undefined'.
I believe all my code is correct, I have index.html with:
Code:
<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>
app.js
Code:
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userList'
}
});
}
});
app/controller/Users.js with
Code:
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
Code:
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);
}
});
Can anyone tell me what's wrong? Thank you.