Extjs之TypeError: Element.prototype.styleHooks is not an object or null

解决ExtJS加载冲突

最新推荐文章于 2020-10-22 16:57:33 发布

原创最新推荐文章于 2020-10-22 16:57:33 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在使用ExtJS框架时遇到的加载冲突问题及其解决方案。通过调整JavaScript文件的加载顺序，避免了浏览器中因重复加载导致的错误。

简单的写了一个extjs的入门页面


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MyTESToR here</title>
<link rel="stylesheet" href="./ext/resources/css/ext-all.css"> 
<script src="./ext/ext-all.js"></script>
<script src="./ext/bootstrap.js"></script>
<!--<jwr:style src="/bundles/all.css" />
<jwr:script src="/bundles/lib.js"/>
-->
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
if(Ext.BLANK_IMAGE_URL.substr(0,4)!="data"){
	Ext.BLANK_IMAGE_URL="./images/s.gif";
}
new Ext.Viewport({
	layout:'fit',
	items:[{
		xtype:"panel",
		title:"welcome",
		html:"<h1> hello world</h1>"
	}]

})
})
</script>
</body>
</html>

在ff中浏览的时候，一直页面出不来，并且在console端报如下的错误：
[color=red][b][b]TypeError: Element.prototype.styleHooks is not an object or null

...alStyleHooks90 = verticalStyleHooks90 = Ext.Object.chain(Element.prototype.style...

ext-all-dev.js (line 29423, col 64)
TypeError: Ext.fly(...).addCls is not a function

...ush(c+"strict")}else{k.push(c+"quirks")}Ext.fly(n,"_internal").addCls(k)}Ext.fly...

ext-all.js (line 18, col 112123)[/b][/b][/color]

然后google了一些原来是重复的js加载到来的冲突导致的。把灰色部分去掉即可，因为bootstrap.js在启动的时候会自动根据当前是开发环境还是production环境来决定加载ext-all.js还是ext-all-debug.js，当你写了两个的时候，ff就出现加载冲突，导致错误。
[color=gray]<script src="./ext/ext-all.js"></script>[/color]
<script src="./ext/bootstrap.js"></script>

这样的话，页面就可以加载成功了