Chargement du contenu de manière dynamique (panneaux) dans un Ext Js Fenêtre d'affichage

Pour répondre à vos questions:

1. L' .la méthode de chargement charge de script et de l'évaluer, une fois que le contenu a fini de charger, mais pour ce faire, vous devrez configurer les scripts:véritable option, un exemple peut être:

my_panel.load({
  url: 'url_to_load.php/hmt/html/asp...',
  params: {param1: param1value, param2: param2value...etc},
  nocache: true,
  timeout: 30,
  scripts: true
});

1. À l'aide de la fonction eval() est bien...mais vu que les scripts:véritable option de configuration ci-dessus accomplit ce pour javascript dans le fichier source, vous ne devriez pas besoin d'utiliser cette.

Espère que cette aide

OriginalL'auteur SW4

Ce que j'ai compris de votre question, c'est que, vous êtes à la recherche pour la dynamique de fichier JS chargeur avec un gestionnaire de rappel c'est à dire la fonction de rappel est appelée uniquement lorsque le fichier est chargé entièrement. J'ai aussi rencontré des problèmes similaires au démarrage et après la recherche d'un beaucoup et en faisant quelques recherche, j'ai développé le code suivant, il permet une grande Dynamique en JS et CSS fichier fonctionnalité de chargement :

Classe ScriptLoader: (le Mettre dans un fichier séparé et de le charger au premier)

ScriptLoader = function() {
this.timeout = 30;
this.scripts = [];
this.disableCaching = false;
};
ScriptLoader.prototype = {
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);
}
},
processFailure : function(response) {
Ext.MessageBox.show({
title : 'Application Error',
msg : 'Script library could not be loaded.',
closable : false,
icon : Ext.MessageBox.ERROR,
minWidth : 200
});
setTimeout(function() {
Ext.MessageBox.hide();
}, 3000);
},
load : function(url, callback) {
var cfg, callerScope;
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 (this.scripts[url]) {
if (typeof callback == 'function') {
callback.call(callerScope || window);
}
return null;
}
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
}
});
}
};
ScriptLoaderMgr = function() {
this.loader = new ScriptLoader();
this.load = function(o) {
if (!Ext.isArray(o.scripts)) {
o.scripts = [o.scripts];
}
o.url = o.scripts.shift();
if (o.scripts.length == 0) {
this.loader.load(o);
} else {
o.scope = this;
this.loader.load(o, function() {
this.load(o);
});
}
};
this.loadCss = function(scripts) {
var id = '';
var file;
if (!Ext.isArray(scripts)) {
scripts = [scripts];
}
for (var i = 0; i < scripts.length; i++) {
file = scripts[i];
id = '' + Math.floor(Math.random() * 100);
Ext.util.CSS.createStyleSheet('', id);
Ext.util.CSS.swapStyleSheet(id, file);
}
};
this.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 = function() {
count++;
if (count == files.length) {
o.callback.call();
}
}
}
script.src = file;
head.appendChild(script);
});
}
};
ScriptMgr = new ScriptLoaderMgr();

Maintenant, il peut être utilisé de cette façon:

Pour les fichiers CSS de chargement :

ScriptMgr.loadCss([first.css', 'second.css']);

Qui est vous avez juste besoin de fournir des fichiers css chemin dans un tableau et passer ce tableau à loadCss() fonction en tant qu'argument. Pas de rappel est nécessaire pour les fichiers CSS.

Pour le fichier JS de chargement :

ScriptMgr.load({
scripts : ['lib/jquery-1.4.2.min.js','lib/jquery.touch-gallery-1.0.0.min.js'],
callback : function() {              
//Here you will do those staff needed after the files get loaded
},
scope : this
});

Dans ce cas, de la même manière que vous avez entré CSS fichiers, ici vous avez juste besoin de mettre la pile de fichiers JS dans les scripts option. La fonction de callback n'est appelé que lorsque tous les fichiers JS sont chargés avec succès. Aussi, si dans tous les cas, les fichiers JS sont déjà chargés dans le navigateur (c'est à dire déjà ce code est exécuté une seule fois), ensuite, la commande sera automatiquement à la fonction de rappel.

OriginalL'auteur Swar