出于项目需要得学点ExtJS(版本是extjs 3.2),按照网上的教程创建了第一个使用extjs的html文件,浏览器打开后一片空白,F12查看控制台,报错,Uncaught ReferenceError: Ext is not defined。
原因是没有引入ext-base.js或者ext-base.js的顺序不对,ext-base.js必须在ext-all.js前面引入。引入ext-base.js并调整引入的顺序后,代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ExtJs</title>
<link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ExtJs/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/ext-all-debug-w-comments.js" type="text/javascript"></script>
</head>
<body>
<div>
<script type="text/javascript">
Ext.onReady(function () {
Ext.MessageBox.alert('标题', 'Hello World!');
});
</script>
</div>
</body>
</html>
再次打开页面,F12没有报错但是页面还是一片空白。排查后觉得是ext-all.js和ext-all-debug-w-comments.js冲突了,删除这两句的任一一句,两个引入其中一个就够了,刷新就能够显示页面了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ExtJs</title>
<link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ExtJs/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
</head>
<body>
<div>
<script type="text/javascript">
Ext.onReady(function () {
Ext.MessageBox.alert('标题', 'Hello World!');
});
</script>
</div>
</body>
</html>
刚入门就遇到不显示页面也不报错误信息的,折腾,还是做下记录,供以后自己和他人参考吧。