IE vs. Firefox an the onReady() Function

[Paul]

I'm trying to understand something about the onReady() function and building up components. I'm going to try posting some snippets because the complete code is too long.

In my main HTML I'm using this to load my JS:

<script type="text/javascript">
    var files = [];
    
    files.push('/valenceapps/signetrx/ext/class.DateSelectorPanel.js');
    files.push('/valenceapps/signetrx/ext/class.RemainingCreditsPanel.js');
    files.push('/valenceapps/signetrx/ext/class.RequestsByCustomerPanel.js');
    files.push('/valenceapps/signetrx/ext/class.RequestsByKodakVsNonKodak.js');
    files.push('/valenceapps/signetrx/ext/class.RequestsByIndexPanel.js');
    files.push('/valenceapps/signetrx/ext/panel.dashboardPanel.js');
    files.push('/valenceapps/signetrx/ext/tabPanel.main.js');
      
    // Appends unique time to each filename and writes to browser
    var refs = [];
    for (var i = 0; i < files.length; i++) {
        files[i] += "?" + new Date().getTime();
        refs[i] = document.createElement('script');
        refs[i].type = 'text/javascript';
        refs[i].src = files[i];
        document.getElementsByTagName('head')[0].appendChild(refs[i]);          
    }
</script>

I originally did it this way to ensure Firefox is loading fresh JS during development but it also works in IE. In the file panel.dashboardPanel.js I have the following (just a snippet):

var dashboardPanel = new Ext.Panel({
    layout: 'border',
    region: 'center',
    height: 1500,
    items: [panelDashboardCriteria, panelGraphs]
});

Both of the items on the panel (panelDashboardCriteria and panelGraphs) are also defined in that file. In my main JS file (tabPanel.main.js) I have the following:

Ext.onReady(function() {
   
    var dashboardTab = new Ext.Panel({
        title: 'Dashboard',
        name: 'dashboardTab',
        layout: 'fit',
        items: [dashboardPanel]
    });
    
    var requestsTab = new Ext.Panel({
        title: 'Requests',
        name: 'requestsTab',
        layout: 'fit',
        html: "The requests grid will go here"
    });

    // second tabs built from JS
    var tabs = new Ext.TabPanel({
        //renderTo: document.body,
        region: 'center',
        activeTab: 0,
        plain: true,
        width: '100%',
        height: 1500,
        defaults: {
            autoScroll: true
        },
        items: [dashboardTab, requestsTab]
    });
    
    new Ext.Viewport({
        layout: 'border',
        items: [tabs]
    });
    
});

When I load this in Firefox it works perfectly. When I try and run it in IE 7 or 8 I get an error that "dashboardPanel" on the dashboardTab variable declaration is undefined. So I changed panel.dashboardPanel.js to a class and changed my tabPanel.main.js to this:

Ext.onReady(function() {
   
    var dashboardTab = new Ext.Panel({
        title: 'Dashboard',
        name: 'dashboardTab',
        layout: 'fit',
        items: [new SAI.signetrx.panels.DashboardPanel()] // <-- changed line
    });
    
    var requestsTab = new Ext.Panel({
        title: 'Requests',
        name: 'requestsTab',
        layout: 'fit',
        html: "The requests grid will go here"
    });

    // second tabs built from JS
    var tabs = new Ext.TabPanel({
        //renderTo: document.body,
        region: 'center',
        activeTab: 0,
        plain: true,
        width: '100%',
        height: 1500,
        defaults: {
            autoScroll: true
        },
        items: [dashboardTab, requestsTab]
    });
    
    new Ext.Viewport({
        layout: 'border',
        items: [tabs]
    });
    
});

And it now works in IE and Firefox. What I'm trying to get is why. I'd like to understand WHY this works in both when the former works only in Firefox. My includes are being loaded in the correct order, the dashboardPanel variable is defined in panel.dashboardPanel.js, etc., so why doesn't IE see it in the onReady() function?

Thanks,
Paul

[richard.milone]

You're running into a timing problem. Firefox is generally faster than IE so the script you're pumping into the page is executing soon enough that it's not a problem. I suspect the only reason your second method is working in IE is that you're slowing the code down a bit (although that's only speculation on my part). You'd be better off just putting the source directly in the header and not worry about pumping it in manually. If you develop in Firefox you can just right-click on the open app and choose This Frame-->Reload Frame and that will force a reload of your external js files. If you really must pump it in manually I would suggest looking at Valence.util.execScriptFiles. There's an excellent example of how to use it in the source for the portal's login page located at [valence root]/html/portal/core/vvlogin.html. You'll find this snippet of code at the bottom which executes the external JavaScript for the language literals before using a callback to execute the vvlogin function, which is the main part of the page logic:

// when document is ready, load language files and then launch the page
Ext.onReady(function() {
    Valence.util.execScriptFiles({
        urls: ['/extjs/src/locale/ext-lang-' + Valence.lang.getLanguage() + '.js',
            '/vvresources/locale/portal/vvlang-en.js',
            '/vvresources/locale/portal/vvlang-' + Valence.lang.getLanguage() + '.js'
        ],
        callback: vvlogin
    });
});

For more info on Valence.util.execScriptFiles you can find it in the Valence API Docs.