Explication détaillée d'exemples de chargement dynamique de pages et de leur exécution

ExtJS 4.1 TabPanel charge dynamiquement la page et exécute le script. Il m'a fallu plusieurs jours pour écrire ce truc, mais après l'avoir terminé, j'aurai enfin un sentiment d'accomplissement. vous en parler ci-dessous. Présentation de tout mon processus d'écriture de code.

Selon l'exemple officiel, la page peut être chargée dynamiquement, mais le script n'est pas exécuté, j'ai donc vérifié le SDK et Google et j'ai découvert que les scripts devaient être définis sur true, j'ai donc défini cet attribut. Le code complet est le suivant

tabPanel.add({
title: 'dynamic page',
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }
});

Au début, je pensais qu'il y avait quelque chose qui n'allait pas avec le script de chargement de la page, car après avoir vérifié beaucoup d'informations, certaines personnes ont dit qu'il devrait être écrit dans le < body>, tandis que d'autres ont dit qu'il ne pouvait être écrit que sur la page et ne pouvait pas utiliser src pour référencer des fichiers js, mais peu importe comment j'ai essayé, cela n'a pas fonctionné. Non, ma page de chargement est très simple. la page est chargée, une fenêtre pop-up apparaîtra

<script type="text/javascript">
alert("addd");
</script>
后来想，是不是需要在tab被激活的事件手工load，而不是autoLoad，于是再次实验，终于成功了，兴奋！
tabPanel.add({
title: &#39;dynamic page&#39;,
closable: true,
loader: { &#39;test.htm&#39;, loadMask: &#39;loading...&#39;, autoLoad: true, scripts: true }
 listeners: { activate: function(tab){ tab.loader.load(); } }
});

Je pensais au départ que je m'arrêterais ici et finirais enfin cet onglet en une journée, mais quand j'étais excité, j'ai découvert que cette méthode est efficace. Le problème est que chaque fois que vous cliquez sur un onglet, un événement d'activation sera déclenché pour lire la page d'arrière-plan une fois, et l'effet que je souhaite est qu'une fois le frontend chargé une fois, le changement d'onglet n'accédera plus au backend. J'ai donc vérifié le SDK et Google, et essayé de juger que l'onglet avait été chargé dans l'événement activate, mais j'ai échoué

Le lendemain, j'ai supprimé les écouteurs, puis j'ai inexplicablement voulu tester l'effet de chargement de la page chargée, et a délibérément bloqué le fil de discussion de la page et ajouté le code suivant

System.Threading.Thread.Sleep(5000);

Cette fois, ce n'était pas intentionnel, et j'ai trouvé que la page chargé après 5 secondes pourrait en fait exécuter le script normalement !

Mes étapes sont les suivantes : cliquez sur le bouton de chargement, puis cliquez sur l'onglet chargé dynamiquement. L'onglet n'a pas de contenu. Au bout de 5 secondes, le contenu apparaît et le script est exécuté

mais. la page est chargée, je n'arrive pas toujours à dormir, alors je continue de vérifier les informations et continue d'essayer, et commence même à déboguer le code source d'extjs. Voici comment déboguer la page avec le script suivant

<. 🎜>

<script type="text/javascript"
src="/Scripts/ext/ext-all.js?1.1.11"></script>改为
<script type="text/javascript"
src="/Scripts/ext/ext-debug.js?1.1.11"></script>

Je n'expliquerai pas comment déboguer. Il y en a beaucoup sur Google Oui, je débogue depuis un jour, mais en vain. Cependant, c'est mon premier contact étroit avec le code extjs

Et j'ai aussi découvert une chose étrange lors du débogage, même si Sleep(5000) est ajouté, le script de page chargé ne peut pas être exécuté. Je suis devenu de plus en plus perplexe

Le troisième jour, j'ai rejoint des groupes QQ comme un fou, j'ai posté sur divers forums et sites Web, et j'ai continué à chercher sur Google, mais en vain

Le quatrième jour, J'ai eu la chance de pouvoir effectuer une recherche à l'aide du chargement automatique Bing de Microsoft :true, scripts : c'est vrai, le premier article sort, il y a une telle introduction, mais il s'agit d'extjs Comment le panneau 4.0 charge la page et exécute le script, je l'ai donc testé selon son code

Ext.onReady(function () {
  var panel = Ext.create('Ext.Panel', {
  title: 'Anchor
Layout',  
  renderTo:Ext.getBody(),  
  loader:{ url: "test.htm",autoLoad:true,
scripts:true}//加载1.htm页面
  });
  });

et le code peut être exécuté avec succès ! J'étais complètement excité maintenant, car l'onglet peut charger n'importe quel composant, et bien sûr il peut aussi charger le panneau, donc j'ai modifié mon code

var panel = Ext.create('Ext.Panel',{
title: 'dynamic page',
renderTo:Ext.getBody(),
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true,
scripts: true }
});
tabPanel.add(panel);

avec succès ! Je suis vraiment ravi. Après avoir passé 4 jours, j'ai finalement obtenu un bon résultat. Ce genre de joie ne peut être compris que par notre équipe technique

En comparant les différences de code, j'ai trouvé qu'il manquait une configuration, qui est la couleur jaune au-dessus de moi. Celui marqué, renderTo:Ext.getBody(), doit en fait être rendu avant que le script puisse être affiché normalement. Pourquoi n'y a-t-il pas de SDK ! !

Mais, mais... ce n'est pas une solution parfaite. Les amis prudents sauront que le script chargera d'abord la page de chargement sur la page principale, et qu'elle disparaîtra après avoir changé d'onglet. Parce que j'étais tellement excité à ce moment-là, je ne l'ai pas remarqué, hélas.

J'ai dû arrêter de taper sur le clavier et y réfléchir attentivement. J'ai réussi à charger la page et à exécuter le script trois fois. Ces trois fois étaient

1 et lorsque l'onglet a été activé<. 🎜 >

2. Après avoir dormi, cliquez sur l'onglet et attendez que la page se charge

3. Ajouter le rendu à la configuration

Après avoir longuement réfléchi, j'ai finalement découvert que ces trois succès tous avaient un point commun, la page chargée s'affiche, c'est à dire que si l'onglet charge d'abord la page puis est "vu", le script ne sera pas exécuté

Afin de vérifier mon idée, j'ai immédiatement commencé à le tester et j'ai mis Set sleep à 100 millisecondes, cliquez sur le bouton de chargement, puis regardez l'onglet chargé après 1 seconde. Effectivement, le script n'est pas exécuté ! ! !

Enfin trouvé la raison :

l'onglet doit d'abord être "affiché", puis chargé

, alors c'est facile, vérifiez le SDK immédiatement, il n'est pas difficile de trouver la méthode show, donc modifier le code

OK, le script s'exécute normalement, et mon problème est "parfaitement" résolu

tabs.add({
title: 'dynamic page',
//renderTo: Ext.getBody(),
loader: {
url: 'test.htm',
loadMask: 'loading...',
autoLoad: true,
scripts: true
}
}).show();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!