昨天在学习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']
问题解决。