最近在学习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就能显示出来。那位能帮忙看一下什么问题这是？
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就能显示出来。那位能帮忙看一下什么问题这是？
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']