Dynamisches nachladen von CSS und Javascript Dateien mit Hilfe von ExtJS

Hallo,

heute habe ich mal was aus der ExtJS, Javascript und CSS Welt für Euch.

Falls Ihr mal Javascript oder CSS nachladen müsst, dann könnt Ihr das mit Hilfe des folgenden EXTJS Scriptes ganz einfach tun.
Fügt dies einfach an eine Stelle in Euer JS Script ein (Wir gehen hier mal davon aus, dass EXTJS korrekt geladen wird)

——————————————————————————————————————————————–
Ext.namespace('Ext.ux');

Ext.ux.Loader = Ext.apply({}, {
load: function(fileList, callback, scope, preserveOrder) {
var scope = scope || this,
head = document.getElementsByTagName("head")[0],
fragment = document.createDocumentFragment(),
numFiles = fileList.length,
loadedFiles = 0,
me = this;

//Hier wird eine dedizierte Datei von der Liste der Dateien heruntergeladen.
//Dies wird benötgt, wenn die Reihenfolge beachtet werden soll
var loadFileIndex = function(index) {
head.appendChild(
me.buildScriptTag(fileList[index], onFileLoaded)
);
};

/**
* Die CALLBACK Funktion - Sie wird einmal aufgerufen, wenn alle Dateien (nach der Letzten) geladen wurden.
*/
var onFileLoaded = function() {
loadedFiles ++;

//check ob dies die letzte Datei war, die geladen werden soll, wenn ja rufe die Callback Funktion auf - wenn nicht wird die nächste Datei geladen
if (numFiles == loadedFiles && typeof callback == 'function') {
callback.call(scope);
} else {
if (preserveOrder === true) {
loadFileIndex(loadedFiles);
}
}
};

if (preserveOrder === true) {
loadFileIndex.call(this, 0);
} else {
//Jede einzelne Datei laden
Ext.each(fileList, function(file, index) {
fragment.appendChild(
this.buildScriptTag(file, onFileLoaded)
);
}, this);

head.appendChild(fragment);
}
},

buildScriptTag: function(filename, callback) {
var exten = filename.substr(filename.lastIndexOf('.')+1);

if(exten=='js') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = filename;

//IE Sonderollen Handling
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;
}
}
});

———————————————————————————————————
Die Nutzung des Scriptes ist auf folgende Weise möglich:

var td = new Date();
Ext.ux.Loader.load([
'cssloadt1.js',
'cssloadt1.css'],
function() { // CALLBACK Funktion wenn alle Dateien erfolgreich geladen wurden
console.log('Dateien erfolgreich geladen: (Ladezeit: %dms)', td.getElapsed());
},
this // scope
);

Vielen Dank an mm_202 für sein Posting (http://www.sencha.com/forum/showthread.php?107796-Ext.ux.Loader-Load-js-css-Files-Dynamically)

Dieser Beitrag wurde unter Allgemein abgelegt und mit , , , , , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.