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

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


问题解决。微笑

阅读更多
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭