EXT JS无法同时加载多个页面
EXT JS failed to load multi pages at the same time
默认情况下,我的网站有多个选项卡,当刚刷新网站时,第一个选项卡还没有加载,然后我点击了第二个选项卡。第二个选项卡工作正常,但当您返回第一个选项卡时,它是空白的。
p/s:当第一个选项卡还没有加载完成时,你点击了一个新的选项卡,这将导致ext-all.js
出现此错误
TypeError: b.getComputedStyle(...) is null
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k...
2
所有选项卡标题都包含ext-all.js
示例选项卡1 vehicle.html
标题代码
<script type="text/javascript" src="../resources/js/ext-all.js"></script>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../resources/js/checkcookie.js?<?php echo time(); ?>"></script>
<script type="text/javascript" src="vehicle.js?<?php echo time(); ?>"></script>
示例选项卡2 driver.html
标题代码
<script type="text/javascript" src="../resources/js/ext-all.js"></script>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../resources/js/checkcookie.js?<?php echo time(); ?>"></script>
<script type="text/javascript" src="driver.js?<?php echo time(); ?>"></script>
这是我的标签代码
Ext.onReady(function() {
var currentItem;
var WinWidth = 1;
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
id : 'tabspanel',
cls : 'MainPanel',
resizeTabs: true,
enableTabScroll: true,
width: window.innerwidth,
height: window.innerHeight - 30, //30 because menu height is 30px
tabBar: {
layout: { pack: 'center' }
},
defaults: {
autoScroll: false, //close the tab scrolling
bodyPadding: 0 //must 0,not margin at all
},
items: [
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="vehicle/vehicle.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'bus32',
title: 'Vehicle Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="driver/driver.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'tabuser',
title: 'Driver Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="location/location.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'location32',
title: 'Location Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="route/route.php" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'route32',
title: 'Route Manage'
}
],
plugins: Ext.create('Ext.ux.TabCloseMenu', {
extraItemsTail: [
'-',
{
text: 'Closable',
checked: true,
hideOnClick: true,
handler: function (item) {
currentItem.tab.setClosable(item.checked);
}
},
'-',
{
text: 'Enabled',
checked: true,
hideOnClick: true,
handler: function(item) {
currentItem.tab.setDisabled(!item.checked);
}
}
],
listeners: {
aftermenu: function () {
currentItem = null;
},
beforemenu: function (menu, item) {
menu.child('[text="Closable"]').setChecked(item.closable);
menu.child('[text="Enabled"]').setChecked(!item.tab.isDisabled());
currentItem = item;
}
}
})
});
默认情况下有4个选项卡,很难解释我面临的问题。希望这些信息足以让你理解,如果有任何事情让你混淆,请道歉
其他信息
我试着加载不同的页面加载不同的文件ext-all.js
示例选项卡1加载ext-all.js,选项卡2加载ext-all2.js,它运行良好
首先,您确实应该在主文档中加载Extjs,而不是在iframe中。在任何情况下,您都不需要像您尝试的那样加载ex-all.js和ext-all2.js。
然后,按照@Damask的建议,尝试用ajax加载选项卡内容。您可以使用loader
配置或使用Ext.Ajax
来执行此操作。
此外,不要使用ext-all.js进行开发,因为它被缩小了,而且你得到的错误不容易解释。相反,使用ext-debug.js,就像这里推荐的那样,或者更好的是使用ext-dev.js。这些可以与Ext.Loader
一起使用,并且只加载您需要的类。
检查组件id。它可能会对进行复制
是什么迫使您在ExtJS中使用iframe?这真的有道理吗?使用ajax加载选项卡。它将阻止您处理与iframe相关的问题。
相关文章:
- Wordpress插件根据需要加载js和css
- js文件未加载js控制台say's”;不允许加载本地资源”;
- Material Design Lite所有元素加载JS回调
- 动态重新加载JS
- 加载Js文件应用程序加载
- 按顺序异步加载JS脚本(等待上一个脚本完成)
- 如何加载js文件并在CEF上执行
- ASP.NET MVC路由-动态加载.js脚本
- 有没有办法只在必要时加载JS和CSS
- 加载 js 文件时出现 404 错误
- 根据用户屏幕大小加载 JS 或 PHP
- jQuery没有在ajax请求的脚本标记中加载js文件
- 加载 JS 函数加载时出现问题
- 不要为机器人(谷歌和其他)加载JS脚本以获得更好的性能
- 节点JS加载JS&ejb文件中的css文件
- Iron Router:在模板渲染后加载js脚本
- PhantomJS未从同一URL加载.js
- 重新路由时重新加载.js文件
- 在Express中转义/:路由以加载js和css
- CRON和页面加载JS