使用autoload无法加载页面文件

最新推荐文章于 2023-05-11 19:23:00 发布

lemon11231008

最新推荐文章于 2023-05-11 19:23:00 发布

阅读量650

点赞数

分类专栏： JavaScript 文章标签： autoload extjs html stylesheet border domain

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初学ExtJs，想模拟实现一个系统的框架，代码如下

js文件代码

Ext.onReady(function() { new Ext.Viewport({ layout : "border", items : [{ region : "north", height : 90, html : "<img src="./images/title_bg.gif" mce_src="images/title_bg.gif">", bbar : [{ text : "Domain Model", id : "add" xtype : "tbseparator" text : "Domain Model11" }, { region : "west", title : "菜单栏", width : 200, collapsible : true region : "south", title : "<center>Copyright@1998-2009 Huawei Technologies Co., Ltd. All Rights Reserved.</center> ", height : 25 region : "center", html : "<div id='main'></div>" }) Ext.get("add").on("click", function() { // Ext.Msg.alert("aaaaaaaaaaaaaa","aaaaaaaaaaaaa"); new Ext.Panel({ renderTo : "main", region : 'center', border : true, autoLoad : { url : "test.html", scripts : true, scope : this }) })

HTML文件代码

<!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=gbk"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="./scripts/exts/resources/css/ext-all.css" mce_href="scripts/exts/resources/css/ext-all.css"> <mce:script type="text/javascript" src="./scripts/exts/adapter/ext/ext-base.js" mce_src="scripts/exts/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="./scripts/exts/ext-all.js" mce_src="scripts/exts/ext-all.js"></mce:script> <mce:script type="text/javascript" src="./scripts/js/borderlayout.js" mce_src="scripts/js/borderlayout.js"></mce:script> </head> <body> </body> </html>

问题1:当打开页面，点击菜单栏上的按钮，在主区域只显示loading...状态，

解决方法:把页面放到一个应用中部署到Web服务器上，以方式打开

问题2:当以上问题解决了，就可以加载页面了，还要注意的就是如果你加载的就是一个不包含Extjs代码的HTMl文件，不会出现异常，当加载的是一个包含ExtJs的HTML文件时，会出现js错误。

解决方法:将内嵌的包含Extjs代码HTML文件的头部加载ExtJS核心js文件去掉。