Mostrando resultados del 1 al 2 de 2

Tema: Ext.ux.Loader: Load js/css Files Dynamically

  1. #1
    Ext JS Premium Member Avatar de mm_202
    Fecha de Ingreso
    Dec 2007
    Ubicaci
    USA
    Mensajes
    59

    Post Ext.ux.Loader: Load js/css Files Dynamically

    I looked and couldn't find something that would fit my needs of dynamically loading .css files, so I hashed it together and wanted to share it in case someone else runs into the same need.

    This allows you to load javascript and CSS files dynamically, and leaves room to add support for other file types.

    This is basically a modified buildScriptTag in Loader.js:
    C:
    buildScriptTag: function(filenamecallback) {
            var 
    exten filename.substr(filename.lastIndexOf('.')+1);
            
    //console.log('buildScriptTag: filename=[%s], exten=[%s]', filename, exten);
            
    if(exten=='js') {
                var 
    script  document.createElement('script');
                
    script.type "text/javascript";
                
    script.src  filename;
                
                
    //IE has a different way of handling <script> loads, so we need to check for it here
                
    if(script.readyState) {
                    
    script.onreadystatechange = function() {
                        if (
    script.readyState == "loaded" || script.readyState == "complete") {
                            
    script.onreadystatechange null;
                            
    callback();
                        }
                    };
                } else {
                    
    script.onload callback;
                }
                return 
    script;
            }
            if(
    exten=='css') {
                var 
    style document.createElement('link');
                
    style.rel  'stylesheet';
                
    style.type 'text/css';
                
    style.href filename;
                
    callback();
                return 
    style;
            }
        } 
    Here is the full file (Ext.ux.Loader.js) for those not wanting to modify the extjs files:
    C:
    // 100822: Taken from Extjs 3.2.1.  Dynamically loads js/css files and allows room for expansion.

    Ext.namespace('Ext.ux');

    Ext.ux.Loader Ext.apply({}, {
        
    load: function(fileListcallbackscopepreserveOrder) {
            var 
    scope       scope || this,
                
    head        document.getElementsByTagName("head")[0],
                
    fragment    document.createDocumentFragment(),
                
    numFiles    fileList.length,
                
    loadedFiles 0,
                
    me          this;
            
            
    // Loads a particular file from the fileList by index. This is used when preserving order
            
    var loadFileIndex = function(index) {
                
    head.appendChild(
                    
    me.buildScriptTag(fileList[index], onFileLoaded)
                );
            };
            
            
    /**
            * Callback function which is called after each file has been loaded. This calls the callback
            * passed to load once the final file in the fileList has been loaded
            */
            
    var onFileLoaded = function() {
                
    loadedFiles ++;
                
                
    //if this was the last file, call the callback, otherwise load the next file
                
    if (numFiles == loadedFiles && typeof callback == 'function') {
                    
    callback.call(scope);
                } else {
                    if (
    preserveOrder === true) {
                        
    loadFileIndex(loadedFiles);
                    }
                }
            };
            
            if (
    preserveOrder === true) {
                
    loadFileIndex.call(this0);
            } else {
                
    //load each file (most browsers will do this in parallel)
                
    Ext.each(fileList, function(fileindex) {
                    
    fragment.appendChild(
                        
    this.buildScriptTag(fileonFileLoaded)
                    );
                }, 
    this);
                
                
    head.appendChild(fragment);
            }
        },
        
        
    buildScriptTag: function(filenamecallback) {
            var 
    exten filename.substr(filename.lastIndexOf('.')+1);
            
    //console.log('Loader.buildScriptTag: filename=[%s], exten=[%s]', filename, exten);
            
    if(exten=='js') {
                var 
    script  document.createElement('script');
                
    script.type "text/javascript";
                
    script.src  filename;
                
                
    //IE has a different way of handling <script> loads, so we need to check for it here
                
    if(script.readyState) {
                    
    script.onreadystatechange = function() {
                        if (
    script.readyState == "loaded" || script.readyState == "complete") {
                            
    script.onreadystatechange null;
                            
    callback();
                        }
                    };
                } else {
                    
    script.onload callback;
                }
                return 
    script;
            }
            if(
    exten=='css') {
                var 
    style document.createElement('link');
                
    style.rel  'stylesheet';
                
    style.type 'text/css';
                
    style.href filename;
                
    callback();
                return 
    style;
            }
        }
    }); 
    Simple example usage:
    C:
    var td = new Date();
    Ext.ux.Loader.load([
        
    'js/extjs/examples/ux/Spinner.js',
        
    'js/extjs/examples/ux/SpinnerField.js',
        
    'js/extjs/examples/ux/css/Spinner.css',
        
    'spinnerexample.js'],
        function() {    
    // callback when finished loading
            
    console.log('Loaded files successfully.  (loadtime: %dms)'td.getElapsed());
            
    Example.Spinner();
        },
        
    this        // scope
    ); 
    Tested in FF 3.6.8 and Chrome 5.0 without any problems. Feedback welcome.
    Raz: Forgot to remove console.log()

  2. #2
    Sencha User
    Fecha de Ingreso
    Mar 2007
    Mensajes
    61

    Predeterminado

    Looks good. I am going to give it a try. I will be using IE 7-8 so if I run into any problems I will let you know. Thanks for the hard work!

Temas Similares

  1. Struts2 Ext-js basic question: linking .css and .js files
    By Kafir in forum Ext 3.x: Help & Discussion
    Respuestas: 3
    : 07-02-2010, 13:24:24
  2. loading Ext js dependencies dynamically via YUI Loader
    By sjivan in forum Community Discussion
    Respuestas: 3
    : 06-11-2009, 13:02:24
  3. Dynamically loading Ext dependent external JS files
    By ferr in forum Ext 1.x: Help & Discussion
    Respuestas: 12
    : 14-05-2008, 09:56:55
  4. How to load a .js or .css file dynamically
    By Kevin_Liu in forum Ext 2.x: Help & Discussion
    Respuestas: 1
    : 24-04-2008, 18:56:38
  5. Ext CSS files does not pass the W3C validation ?!
    By jaggybala in forum Community Discussion
    Respuestas: 2
    : 21-04-2008, 06:21:55

Tags for this Thread

Normas de Publicaci

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •