1. #1
    Sencha User LoriSun's Avatar
    Join Date
    Jan 2009
    Location
    China, Dalian
    Posts
    32
    Vote Rating
    1
    LoriSun is on a distinguished road

      1  

    Smile Ext.ux.OnDemandLoad : Dynamic load js file and invoke the method in it

    Ext.ux.OnDemandLoad : Dynamic load js file and invoke the method in it


    Hi guys,
    I try to dynamic down load one js file, then invoke the method in it. I did it !!!!!!
    Code:
    //------------------------------HAHA.js-------------------------------
    Ext.namespace('Ext.ux');
    
    Ext.ux.OnDemandLoad = function(){
        
        loadComponent = function(component,callback){
            var fileType = component.substring(component.lastIndexOf('.'));
            var head = document.getElementsByTagName("head")[0];
            var done = false;
            if (fileType === ".js") {
                var fileRef = document.createElement('script');
                fileRef.setAttribute("type", "text/javascript");
                fileRef.setAttribute("src", component);
                fileRef.onload = fileRef.onreadystatechange = function(){
                        if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") ) {
                            done = true;
                            eval(callback+'()');
                            head.removeChild(fileRef);
                        }
                    };
            } else if (fileType === ".css") {
                var fileRef = document.createElement("link");
                fileRef.setAttribute("type", "text/css");
                fileRef.setAttribute("rel", "stylesheet");
                fileRef.setAttribute("href", component);
            }
            if (typeof fileRef != "undefined") {
                head.appendChild(fileRef);
            }
        };
    
        return {
            load: function(components, callback){
                Ext.each(components, function(component){
                    loadComponent(component,callback);
                });
            }
        };
    }();
    to use it :
    Code:
    Ext.ux.OnDemandLoad.load('js/desktop/AccountSeletor.js','initAccountSelect');
    
    function  initAccountSelect(){
           //do what you want to do, when js file be download already.
    }
    Last edited by mystix; 9 Mar 2009 at 8:51 AM. Reason: POST CODE IN [code][/code] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code

  2. #2
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480
    Vote Rating
    1
    chalu is on a distinguished road

      0  

    Exclamation


    Hi guys,
    I try to dynamic down load one js file, then invoke the method in it. I did it !!!!!!
    You did what . Your code is not even readable, why would I want to use it anyways

    edit that post, wrap the code in blocks.

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    9
    Vote Rating
    0
    tanajura is on a distinguished road

      0  

    Thumbs up Example Ext.ux.OnDemandLoad

    Example Ext.ux.OnDemandLoad


    Very good!
    Try this example zip atached.
    tks
    Attached Files

  4. #4
    Sencha User LoriSun's Avatar
    Join Date
    Jan 2009
    Location
    China, Dalian
    Posts
    32
    Vote Rating
    1
    LoriSun is on a distinguished road

      0  

    Default


    Thank a lot

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default


    Excellent!
    Good job.

  6. #6
    Sencha User
    Join Date
    Mar 2008
    Posts
    10
    Vote Rating
    0
    Lwismanuel is on a distinguished road

      0  

    Default


    Excelente!
    I wrote something similar but yours is better. You are mad genius.

  7. #7
    Sencha Premium Member
    Join Date
    Dec 2008
    Posts
    3
    Vote Rating
    0
    Iorek is on a distinguished road

      0  

    Default


    Quote Originally Posted by Lwismanuel View Post
    Excelente!
    I wrote something similar but yours is better. You are mad genius.
    DON'T anybody ever read jquery code?

    Code:
    // If we're requesting a remote document
            // and trying to load JSON or Script with a GET
            if ( s.dataType == "script" && type == "GET"
                    && remote.test(s.url) && remote.exec(s.url)[1] != location.host ){
                var head = document.getElementsByTagName("head")[0];
                var script = document.createElement("script");
                script.src = s.url;
                if (s.scriptCharset)
                    script.charset = s.scriptCharset;
    
                // Handle Script loading
                if ( !jsonp ) {
                    var done = false;
    
                    // Attach handlers for all browsers
                    script.onload = script.onreadystatechange = function(){
                        if ( !done && (!this.readyState ||
                                this.readyState == "loaded" || this.readyState == "complete") ) {
                            done = true;
                            success();
                            complete();
                            head.removeChild( script );
                        }
                    };
                }
    
                head.appendChild(script);
    
                // We handle everything using the script element injection
                return undefined;
            }

  8. #8
    Sencha User LoriSun's Avatar
    Join Date
    Jan 2009
    Location
    China, Dalian
    Posts
    32
    Vote Rating
    1
    LoriSun is on a distinguished road

      0  

    Default


    Thanks, Iorek.

    New Version upgrade:
    1. Clean useless Ext.each.
    2. Change the type of second parameter to fix the callbackFN scope issue.
    details please refer to the attached.
    Attached Files
    Last edited by LoriSun; 18 Feb 2009 at 11:47 PM. Reason: add new
    Sencha fans

  9. #9
    Sencha Premium Member
    Join Date
    Dec 2008
    Posts
    3
    Vote Rating
    0
    Iorek is on a distinguished road

      0  

    Smile


    Quote Originally Posted by LoriSun View Post
    Thanks, Iorek.

    New Version upgrade:
    1. Clean useless Ext.each.
    2. Change the type of second parameter to fix the callbackFN scope issue.
    details please refer to the attached.
    Here's another approach to achieve this:

    Code:
    Ext.ux.OnDemandLoadByAjax = function(){
    
        loadComponent = function(component, callback){
            handleSuccess = function(response, options) {
                var type = component.substring(component.lastIndexOf('.'));
                var head = document.getElementsByTagName("head")[0];
                if (type === ".js") {
                    var js = document.createElement('script');
                    js.setAttribute("type", "text/javascript");
                    js.text = response.responseText;
                    if (!document.all) {
                        js.innerHTML = response.responseText;
                    }
    
                    head.appendChild(js);
                }
    
                if(typeof callback == "function"){
                    if(document.all) {
                        callback();
                    } else {
                        callback.defer(50);
                    }
                };
            };
    
            handleFailure = function(response, options) {
                alert('Dynamic load script: [' + component + '] failed!');
            };
    
            Ext.Ajax.request({
                url: component,
                method: 'GET',
                success: handleSuccess,
                failure: handleFailure,
                disableCaching : false
            });
        };
    
        return {
            load: function(components, callback){
                Ext.each(components, function(component){
                    loadComponent(component, callback);
                });
            }
        };
    }();

  10. #10
    Sencha User LoriSun's Avatar
    Join Date
    Jan 2009
    Location
    China, Dalian
    Posts
    32
    Vote Rating
    1
    LoriSun is on a distinguished road

      0  

    Default


    Nice, by Ajax.
    Sencha fans