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

[alexandern]

Very good!
Try this example zip atached.
tks

Really cool, but I am having issues with IE 6 ( unfortunately ) .. Die IE6! Die!!!

[alexandern]

Thank you, this worked with IE6 and Safari...

Here's another approach to achieve this:

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

[oletros]

Hi !
Modified Ext.ux.OnDemandLoadByAjax to permit multiple callbacks, one on each script or
no callback, and no check of script extension (php, js, anything).

/** begin of code **/
Ext.ux.OnDemandLoadByAjax = function() {
    loadComponent = function(component) {
        var sURL = null;
        var sCALLBACK = null;

        if (typeof component === "string") {
            sURL = component;
        } else if (typeof component === "object") {
            sURL = component[0];
            sCALLBACK = component[1];
        }

        handleSuccess = function(response, options) {
            var head = document.getElementsByTagName("head")[0];
            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 sCALLBACK == "function") {
                if (document.all) {
                    sCALLBACK();
                } else {
                    sCALLBACK.defer(50);
                }
            }
        }

        handleFailure = function(response, options) {
            alert('Dynamic load script: [' + sURL + '] failed!');
        }

        Ext.Ajax.request({
            url: sURL ,method: 'GET' ,success: handleSuccess ,failure: handleFailure ,disableCaching : false
        });

    }
    
    return {
        load: function(components) {
            Ext.each(components, function(component) {
                loadComponent(component);
            });
        }
    }
}();

/** end of code **/

/** example of use, one callback only **/
var oScripts = [
    'dependence1.js', 'dependence2.js', [ 'script.php', function(options) {
            alert('this is a callback after script.php');
        }
    ]
];
Ext.ux.OnDemandLoadByAjax.load(oScripts);


/** example of use, multiples callbacks **/
var oScripts = [
    [ 'script1.php', function(options) {
            alert('this is a callback after script1.php');
        }
    ] ,[ 'script2.php', function(options) {
        alert('this is a callback after script2.php');
        }
    ]
];

Ext.ux.OnDemandLoadByAjax.load(oScripts);

Thanks

[LoriSun]

Hi oletros,

Thanks for your effort, feel free to make upgrade on it.

[moegal]

LoriSun,

these are password protected files. 3 .xml and 1 .properties

?

Marty

[moegal]

I am getting the same thing. Password protected xml files.

Sorry, not sure what is going on here.

Marty

[Hristina]

I have something like this
ONE.JS
...
select: function(obj) {
...
}
...
and I want to invoke this function in another js file,but I do not know how to manage that
For Example
TWO.JS
...
if(condition){
...
select: function(obj)
...
}
...
Something like that!
Thanks

[LoriSun]

Thanks, If any concern just send me the email.

[mpelzsherman]

Do either of these solutions work in IE7?

[zakif]

Dear LoriSun,

I have find your solution might be useful for my problem (Loaded Tab Panel js only when needed).

But I still don't get it. Would you like please to share some tutorial on implementing your solution.

Thanks in advance.