Question

默认情况下，我的网站有多个标签，当只是刷新网站时，第一个标签没有加载，然后我点击了第二个标签。第二个标签工作正常，但当你回到第一个标签时，它是空白的。

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和tab 2加载ext-all2.js，它工作正常

Answer 1

首先，你真的应该在主文档而不是iframe中加载Extjs。在任何情况下，您都不需要加载ex-all.js和ext-all2.js，就像您尝试过的那样。

然后，尝试使用@Damask建议的ajax加载选项卡内容。您可以使用loader config或Ext.Ajax。

执行此操作

另外，不要使用ext-all.js进行开发，因为它是缩小的，并且你得到的错误不容易解释。而不是这样，使用ext-debug.js，如推荐的here，甚至更好，使用ext-dev.js。这些工作与Ext.Loader一起使用，只加载您需要的类。

Answer 2

检查您的组件ID。它可能会复制

Answer 3

是什么迫使你使用带有ExtJS的iframe？真的有道理吗？使用ajax加载标签。它会阻止您处理与iframe相关的问题。

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

3 个答案: