Extjs dynamic load the js and css file

当开发大型Extjs的项目的时候，都会遇到重复load的问题，所以我们就要就行关于这个，防止Extjs重复load

 

这里我提出解决方案:

 

 

/**
 * Script Manager class
 */
Ext.ux.ScriptManager = Ext.extend(Ext.util.Observable, {
    // The timeout in seconds to be used for requests
    timeout : 30,
 
   /**
    * @private
    * Array which will hold the scripts
    */
    scripts : [],
 
    // Whether to cache the javascript files or not
    disableCaching : false,
 
    /**
     * @constructor
     * 
     * Component constructor
     */
    constructor: function(config){
        Ext.apply(this, config);
 
        // Call our superclass constructor to complete construction process.
        Ext.ux.ScriptManager.superclass.constructor.call(this, config)
    },
 
    /**
     * Accepts the config for loading Javascript files
     * @param {Object} o Config options
     */
    loadJs : function(o){
        if (!o) {
            return;
        }
 
        if (o.debug) {
            this.addAsScript(o);
            return;
        }
 
        if (!Ext.isArray(o.scripts)) {
            o.scripts = [o.scripts];
        }
 
        o.url = o.scripts.shift();
 
        if (o.scripts.length == 0) {
            this._loadUrl(o);
        } else {
            o.scope = this;
            this._loadUrl(o, function() {
                this.loadJs(o);
            });
        }
    },
 
    /**
     * Loads the css files dynamically
     *
     * @param {Object} o Config options -
     * {Array} scripts Array of css file paths |
     * {String} id Any existing css file with this id will be overwritten by the new file |
     * {Function} callback Function to be called once the files are loaded | 
     * {Object} scope On this scope the callback function will be called
     *
     * @returns void
     */
    loadCss : function(o) {
        var id = o.id || '';
        var file;
 
        if (!Ext.isArray(o.scripts)) {
            o.scripts = [o.scripts];
        }
 
        for (var i = 0; i < o.scripts.length; i++) {
            file = o.scripts[i];
            id = '' + Math.floor(Math.random() * 100);
            Ext.util.CSS.createStyleSheet('', id);
            Ext.util.CSS.swapStyleSheet(id, file);
        }
 
        if(o.callback && Ext.isFunction(o.callback)){
            o.callback.createDelegate(o.scope || window).call();
        }
    },
 
    /**
     * Adds the JS and CSS files as respective tags in DOM. This feature is used in debug:true option
     * @param {Object} o Config options
     * @returns void
     */
    addAsScript : function(o) {
        var count = 0;
        var script;
        var files = o.scripts;
        if (!Ext.isArray(files)) {
            files = [files];
        }
 
        var head = document.getElementsByTagName('head')[0];
 
        Ext.each(files, function(file) {
            script = document.createElement('script');
            script.type = 'text/javascript';
            if (Ext.isFunction(o.callback)) {
                script.onload = script.onreadystatechange = function() {
                    count++;
                    if (count == files.length) {
                        o.callback.call();
                    }
                }
            }
            script.src = file;
            head.appendChild(script);
        });
    },
 
    /**
     * @private
     *
     * Sends the AJAX request for loading the Javascript file
     * @param {String} url Url of the file to be loaded or the 
     * config object with array of urls ans other config options
     *
     * @param {Function} callback Callback function which 
     * will be called once all the files are loaded
     *
     * @returns Null
     */
    _loadUrl : function(url, callback) {
        var cfg, callerScope;
 
        // If
        if (typeof url == 'object') { // must be config object
            cfg = url;
            url = cfg.url;
            callback = callback || cfg.callback;
            callerScope = cfg.scope;
            if (typeof cfg.timeout != 'undefined') {
                this.timeout = cfg.timeout;
            }
            if (typeof cfg.disableCaching != 'undefined') {
                this.disableCaching = cfg.disableCaching;
            }
        }
 
        // If the url exists in the scripts array, then call the callback function
        // This works as an recursive function call for multiple files
        if (this.scripts[url]) {
            if(callback && Ext.isFunction(callback)){
                callback.createDelegate(callerScope || window).call();
            }
            return null;
        }
 
        // Ajax request for loading the file
        Ext.Ajax.request({
            url : url,
            success : this.processSuccess,
            failure : this.processFailure,
            scope : this,
            timeout : (this.timeout * 1000),
            disableCaching : this.disableCaching,
            argument : {
                'url' : url,
                'scope' : callerScope || window,
                'callback' : callback,
                'options' : cfg
            }
        });
 
        return null;
 
    },
 
    /**
     * @private
     * Function will be called if Ajax loading of scripts are successfull
     * @param {Object} response Ajax response object which will contain the script file content
     * @returns void
     */
    processSuccess : function(response) {
        this.scripts[response.argument.url] = true;
        window.execScript ? window.execScript(response.responseText) : window
        .eval(response.responseText);
        if (response.argument.options.scripts.length == 0) {
        }
        if (typeof response.argument.callback == 'function') {
            response.argument.callback.call(response.argument.scope);
        }
    },
 
    /**
     * @private
     * Function will be called if Ajax loading of scripts fails. It shows an error alert
     * @param {Object} response Ajax response object which will contain the script file content
     * @returns void
     */
    processFailure : function(response) {
        Ext.MessageBox.show({
            title : 'Application Error',
            msg : 'Script library could not be loaded.',
            closable : false,
            icon : Ext.MessageBox.ERROR,
            minWidth : 200,
            buttons: Ext.Msg.OK
        });
        setTimeout(function() {
            Ext.MessageBox.hide();
        }, 2000);
    }
});
 
// Create an instance of the Script Manager
ScriptMgr = new Ext.ux.ScriptManager();

 

 

使用这个的方法：

 

ScriptMgr.loadJs({
    scripts : ['file1.js', 'file2.js'],
    debug : false,
    callback : function(){
        console.log('loaded');
    }
});

 使用这个调用CSS

 

ScriptMgr.loadCss({
     scripts : ['path/to/file1.css', 'path/to/file2.css']
});

 

 

ScriptMgr.loadCss({
     scripts : 'path/to/file1.css',
     id : 'file_to_be_overridden'
});
ScriptMgr.loadCss({
     scripts : 'path/to/file2.css',
     id : 'file_to_be_overridden'
});

 

 

在实战中使用这个：

 

Ext.onReady(function(){
    var panel = new Ext.Panel({
        renderTo : document.body,
        title : 'My Panel',
        html: 'Hello World!',
        width : '100%',
        height : 400,
        tbar : [{
            // A toolbar button with open window handler
            text : 'Open Window',
            scope : this,
            handler : function(){
                ScriptMgr.loadJs({
                    scripts : 'LargeWindowComp.js',
                    callback : function(){
                        // The window file is surely loaded now.
                        // We can create the window instance
                        var win = new LargeWindowComp({
                            width : 400,
                            height : 300,
                            title : 'I am loaded now'
                        });
 
                        win.show();
                    }
                });
            }
        }]
    });
});