EXT JS无法同时加载多个页面

EXT JS failed to load multi pages at the same time

本文关键字:加载 JS EXT      更新时间:2023-09-26

默认情况下,我的网站有多个选项卡,当刚刷新网站时,第一个选项卡还没有加载,然后我点击了第二个选项卡。第二个选项卡工作正常,但当您返回第一个选项卡时,它是空白的。

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相关的问题。