Question

我是ExtJs的新手，我正在尝试遵循本教程：

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

然而，当我到达网格实际上被认为可见的部分时，我在Javascript控制台中收到一条错误：“键入错误：名称未定义”。

我有以下文件，

app.js：

Ext.application({
    name: 'AM',

    appFolder: 'app',
    controllers: ['Users'],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userList'
            }
        });
    }
});

应用程序/控制器/ 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');
    }
});

应用程序/视图/用户/ 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);
    }
});

当然还有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>

由于

Answer 1

你改变了案例：

xtype: 'userList'

alias : 'widget.userlist'

ExtJs 4.0 MVC教程给出

1 个答案: