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: 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

all the tabs header are included ext-all.js

example tab 1 vehicle.html header code

<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>

example tab 2 driver.html header code

<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>

this is my tabs code

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;
                }
            }
        })
    });

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

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

回答1:

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.

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

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.

回答2:

check your component ids. It may do to the duplication

回答3:

What forced you to use iframes with ExtJS ? Is it really justified ? Use ajax for tabs loading. It will prevent you from iframe related issues.

来源：https://stackoverflow.com/questions/20588544/ext-js-failed-to-load-multi-pages-at-the-same-time

标签

javascript

extjs