Extjs4加上controller后页面无法显示

zhanglt 2012-03-21 04:20:55

最近在学习extjs，正好学到MVC构架的例子。
app.js代码如下：



Ext.application({

    requires: 'Ext.container.Viewport',

    name: 'AM',



    appFolder: 'app',

	

	controllers: [

        'Users'

    ],



    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.html代码：



<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>

发现文件结构没有错，不知道为什么一在app.js加上controllers，页面就无法正常显示，一片空白。如果去掉controller，panel就能显示出来。那位能帮忙看一下什么问题这是？

...全文

200 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhanglt 2012-04-27

打赏
举报

[Quote=引用 2 楼的回复:]

说明一下解决办法吧！
[/Quote]

把分送你啦，要不然就浪费了。。。

zhanglt 2012-04-27

打赏
举报

自己解决问题自己没分呀%>_<%。。。。

zhanglt 2012-04-27

打赏
举报

用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']