EXT JS无法同时加载多页 [英] EXT JS failed to load multi pages at the same time

问题描述

默认情况下，我的网站有多个选项卡，只是刷新网站时，第一个选项卡尚未加载，然后单击第二个选项卡。第二个选项卡工作正常，但是当您返回第一个选项卡时，它是空白的。

By default my website are having multi tabs, when just refresh the web site, the first tabs haven't loaded, then i clicked second tabs. second tabs are working fine, but when u go back first tabs, it is blank.

p / s：当第一个选项卡未加载完成时，您是点击一个新的标签，这将导致从 ext-all.js

p/s: when the first tabs are haven't loaded finish, u are click a new tabs, that will cause this error from 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中

all the tabs header are included 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个选项卡，很难解释我面对的是什么。希望这些信息足以让你都明白，如果有任何事情让你困惑，请道歉

By Default are having 4 tabs, it is very hard to explain what i m facing. hope those information are enough to let u all understand, apologize if any thing let u confuse

其他信息

i尝试加载不同的页面加载不同的文件ext-all.js

示例选项卡1加载ext-all.js和tab 2加载ext-all2.js，它工作正常

ADDITIONAL INFO
i have tried to load different page load different file ext-all.js
example tab 1 load ext-all.js and tab 2 load ext-all2.js , it is working fine

推荐答案

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

To start off, you really should load Extjs in the main document and not in the iframes. In no case you need to load ex-all.js and ext-all2.js, like you tried.

然后，尝试使用ajax加载标签内容为@大马士克建议。您可以使用 loader config 或使用 Ext.Ajax 。

Then, try to load the tab contents with ajax as @Damask suggests. You could do this using the loader config or using Ext.Ajax.

另外，不要使用ext-all.js发展，因为它是细化的，你得到的错误不容易解释。而不是使用ext-debug.js，像推荐的这里甚至更好，使用ext-dev.js。这些工作与 Ext.Loader 一起工作，只加载您需要的类。

Also, do not use ext-all.js for development, because it is minified, and the errors you get are not easy to interpret. Instead of this, use ext-debug.js, like recommended here, or even better, use ext-dev.js. These work with Ext.Loaderand load only the classes you need.

这篇关于EXT JS无法同时加载多页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！