ExtJs 4.0 MVC Tutorial gives

0
votes

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: '[email protected]'},
                {name: 'Tommy', email: '[email protected]'}
            ]
        };

        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

1
javascriptextjs4

1 Answers

1
votes

You've changed the case:

xtype: 'userList'

alias : 'widget.userlist'