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

最新推荐文章于 2024-03-19 08:52:53 发布

原创最新推荐文章于 2024-03-19 08:52:53 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #extjs #mvc #框架 #stylesheet #firebug

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文记录了作者在使用ExtJS4框架开发过程中遇到的问题及解决办法。主要问题是由于配置错误导致应用无法正常启动，并最终通过调整requires属性配置解决了该问题。

昨天在学习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']

问题解决。