学习Extjs MVC框架发现的问题——requires.push is not a function

来源：互联网发布：java拦截器权限管理编辑：程序博客网时间：2024/05/16 05:25

昨天在学习Extjs4时，按照文档的代码写了一遍，发现无法运行，代码如下：

app.js：

Ext.application({    requires: 'Ext.container.Viewport',    name: 'AM',    controllers: ['Users'],    appFolder: 'app',    launch: function() {        Ext.create('Ext.container.Viewport', {            layout: 'fit',            items: [                {                    xtype: 'panel',                    title: 'Users',                    html : 'List of users will go here'                }            ]        });    }});

User.js

Ext.define('AM.controller.Users', {    extend: 'Ext.app.Controller',    init: function() {        this.control({            'viewport > panel': {                render: this.onPanelRendered            }        });    },    onPanelRendered: function() {        console.log('The panel was rendered');    }});

index.htm

<html><head>    <title>Hello Ext</title>    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">    <script type="text/javascript" src="extjs/ext-debug.js"></script>    <script type="text/javascript" src="app.js"></script></head><body></body></html>

运行时，页面老是一片空白。用firebug调试发现，提示错误：

requires.push is not a function。

发现问题出在app.js： controller：['Users']上，一旦去掉这句话，页面是能出来的，一加上，问题就会出来。最后发现，extjs包里的Application.js运行app的代码如下：

var requires = config.requires || [],            controllers, ln, i, controller,            paths, path, ns;........if (this.autoCreateViewport) {            requires.push(this.getModuleClassName('Viewport', 'view'));        }.......

其中，config.requires就是app.js中requires属性，这里的变量requires是个数组，而我的app.js的requires属性配置不是数组，所以导致这里的变量requires=config.requires||[ ]变成了一个字符串，而不是数组，以致运行到requires.push的时候，提示这个function不存在，所以只要把app.js里，requires属性改成如下：

requires：['Ext.container.Viewport']

问题解决。