1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    25
    Answers
    2
    Vote Rating
    0
    zoggo is on a distinguished road

      0  

    Default Answered: loading ext-all.js dnymically in Internet Explorer 9

    Answered: loading ext-all.js dnymically in Internet Explorer 9


    Hi,

    We are programming a very complex web application using Ext JS 4.0.7 and other API's. The application is intend to run as an object in a CMS. So we don't have the possibility to load the Ext JS ext-all.js directly in the HTML Header. Instead of that we have to load all our scripts dynamicaly. We found a good solution working with IE7, IE8, FF, Safari and Chrome. Troubling is IE9. In IE9 we never get a the Ext.onReady event neither will the Ext.isReady Property set to true.

    Thanks for every hint.

    Urs

    Code:
    function loadScript(mUrl,mOnLoad){
        var fileref;    
        //add script to head
        fileref = document.createElement('script');
        fileref.setAttribute('type', 'text/javascript');
        fileref.setAttribute('src', mUrl);
        if(mOnLoad){
            switch (true){
                case (navigator.appVersion.indexOf("MSIE") != -1):
                    fileref.onreadystatechange = function () {
                        if (fileref.readyState == 'loaded' || fileref.readyState == 'complete') {                        
                            mOnLoad();
                            fileref.onreadystatechange = null;
                        }
                    };
                    break;                
                default:
                    fileref.onload = mOnLoad;
                }      
    }
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }
    
    //Funktion für JCSS-Files in Header zu laden
    function loadCSS(mUrl){    
        var fileref;
        //add script to head
        fileref = document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", mUrl);
            document.getElementsByTagName("head")[0].appendChild(fileref);
    }
    
    //init Viewer***********************************************************************************************
    
    
    try {
        //agisviewer4 base url
        pAgisviewerDirectory = getAgisViewerDirectory();  
        //CSS laden
        //Load Ext CSS
        loadCSS(pAgisviewerDirectory + "/Viewer/ext-4.0.7-gpl/resources/css/ext-all-scoped.css");
        //Load ESRI CSS
        loadCSS("https://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css" );
        //Load Viewer CSS
        loadCSS(pAgisviewerDirectory + "/Viewer/Styles/layout.css");
        //Skripts laden
        //Load Ext JS Library 
        loadScript(pAgisviewerDirectory + "/Viewer/ext-4.0.7-gpl/ext-all.js", function(){
            
            //im Debug-Modus werden die Klassen aus dem Debug.js File vorab in den hEader geladen
            if (pDebug == true){
                loadScript(pAgisviewerDirectory + "/Viewer/debug.js");
            }
            
            //Statuspersistenz für ExtJS komponenten aktivieren
            //JIRA Nr: AGISVIEWER-14 : HTML Localstorage funktioniert nicht mit IE7
            Ext.state.Manager.setProvider(Ext.create("Ext.state.CookieProvider"));
            //Statuspersistenz für aw4 aktivieren
            pLocalStorageProvider=Ext.create("Ext.state.CookieProvider");
            //Load ESRI JS API
            loadScript("https://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8compact",function(){
                //ESRI Zusatzlibraries laden
                loadEsriRequires();
                //conf file laden
                Ext.Ajax.request({
                    url: pConfigFile,
                    success: function (response) {    
                        //shortcut für Domhelper
                        dh = Ext.core.DomHelper;
                        //Ext JS loader Konfiguration für die das dynamische Laden der Klassen
                         Ext.Loader.setConfig({
                            enabled: true,
                            disableCaching : false
                        });                                        
                        Ext.Loader.setPath("AGISViewerLight", pAgisviewerDirectory); //altes Ligth root
                        Ext.Loader.setPath("Agisviewer", pAgisviewerDirectory); 
                        Ext.require("Agisviewer.Viewer.crossDomainProxy");       
                        pConfig = Ext.JSON.decode(response.responseText,false);                
                        pUrlParameters = getUrlParameters(); // Url Parameter abrufen und ausserhalb der Viewerklasse sichtbar machen.
                        thisViewer.urlParameters = pUrlParameters;
                        thisViewer.config = pConfig;
                        thisViewer.localStorageProvider = pLocalStorageProvider;
                        thisViewer.urlParameters = pUrlParameters;
                        thisViewer.agisviewerBaseUrl = pAgisviewerDirectory; //UR: JIRA: pAgisViewerLightDirectory    
                        thisViewer.toolCollection = new cToolCollection;
                        thisViewer.modulCollection = new cModulCollection;
                        thisViewer.notificationManager = new cNotificationManager;
                        initSplashScreen();                
                        loadModulCSS();
                        loadLESS();
                        ////Sprachfile laden
                        loadLocale();    
                                                     
                        dojo.addOnLoad(function () { //wenn dojo und extjs bereit -> init map
                            
                            
                            if (Ext.isReady) {
                                initHTML(); 
                                initControls();
                                initMap();
                            } else {
                                Ext.onReady(function () {
                                    initHTML();
                                    initControls(); 
                                    initMap();
                                },this,true);
                            }
        
                        });
                    },
                    failure: function (response) {
                        pConfig = null;
                        alert("Konfigurationsfile konnte nicht geladen werden.");
                    }
                });        
            });
        });        
    } catch(e){
        console.log("Fehler im Viewer" + e);
    }

  2. I set Ext ready just before i need ExtJS first time:

    Code:
    if (Ext.isIE9){
    Ext.EventManager.fireDocReady(); 
    }
    Is just needed for IE9

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,412
    Answers
    3549
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Any reason not to have it loaded up front? Have you tried in a newer release (4.0.7 is over a year old)?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    25
    Answers
    2
    Vote Rating
    0
    zoggo is on a distinguished road

      0  

    Default


    I set Ext ready just before i need ExtJS first time:

    Code:
    if (Ext.isIE9){
    Ext.EventManager.fireDocReady(); 
    }
    Is just needed for IE9

Thread Participants: 1