Ausführliche Erläuterung von Beispielen zum dynamischen Laden und Ausführen von Seiten

ExtJS 4.1 TabPanel lädt die Seite dynamisch und führt das Skript aus. Es hat mehrere Tage gedauert, bis ich es geschafft habe Im Folgenden erzähle ich Ihnen davon.

Laut dem offiziellen Beispiel kann die Seite dynamisch geladen werden, aber das Skript wird nicht ausgeführt. Daher habe ich das SDK und Google überprüft und festgestellt, dass Skripte auf „true“ gesetzt werden müssen, also habe ich dieses Attribut festgelegt. Der gesamte Code lautet wie folgt

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

Zuerst dachte ich, dass mit dem Skript zum Laden der Seite etwas nicht stimmte, denn nachdem ich viele Informationen überprüft hatte, sagten einige Leute, dass es in der 1d6e7d87652dd104f173dbf7284e2799, während andere sagten, es könne nur auf die Seite geschrieben werden und src nicht zum Referenzieren von js-Dateien verwendet werden, aber egal wie ich es versuchte, es funktionierte nicht. Nein, meine Ladeseite ist sehr einfach Wenn die Seite geladen ist, wird ein Popup-Fenster angezeigt.

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

Ursprünglich dachte ich, ich würde hier aufhören und diesen Tab an einem Tag endlich fertigstellen, aber als ich aufgeregt war, entdeckte ich, dass diese Methode funktioniert Das Problem besteht darin, dass jedes Mal, wenn auf eine Registerkarte geklickt wird, ein Aktivierungsereignis ausgelöst wird, um die Hintergrundseite einmal zu lesen. Der gewünschte Effekt besteht darin, dass nach dem einmaligen Laden des Frontends beim Wechseln der Registerkarten nicht erneut auf das Backend zugegriffen wird. Also habe ich das SDK und Google überprüft und versucht zu beurteilen, ob der Tab im Aktivierungsereignis geladen wurde, aber es ist fehlgeschlagen

Am nächsten Tag habe ich die Listener entfernt und wollte dann aus unerklärlichen Gründen den Ladeeffekt von testen die geladene Seite, blockierte absichtlich den Seitenthread und fügte den folgenden Code hinzu:

System.Threading.Thread.Sleep(5000);

Diesmal war es unbeabsichtigt, und ich stellte fest, dass die Seite nach 5 Sekunden geladen wurde, konnte das Skript tatsächlich normal ausführen!

Meine Schritte sind wie folgt: Klicken Sie auf die Schaltfläche „Laden“ und dann auf die dynamisch geladene Registerkarte. Nach 5 Sekunden wird der Inhalt angezeigt und das Skript wird ausgeführt Die Seite wird nicht immer geladen, also überprüfe ich weiterhin die Informationen und versuche es weiter und beginne sogar mit dem Debuggen des Quellcodes von extjs. Hier erfahren Sie, wie Sie das folgende Skript debuggen 🎜>

Ich werde nicht erklären, wie man debuggt. Es gibt viele auf Google. Ja, ich habe einen Tag lang debuggt, aber ohne Erfolg. Dies ist jedoch mein erster enger Kontakt mit extjs-Code

<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>

Und ich habe beim Debuggen auch eine seltsame Sache entdeckt, selbst wenn Sleep(5000) hinzugefügt wird wurde immer verwirrter

Am dritten Tag schloss ich mich wie verrückt QQ-Gruppen an, postete in verschiedenen Foren und Websites und googelte weiter, aber ohne Erfolg

Am vierten Tag Ich hatte das Glück, mit Bing autoload:true von Microsoft suchen zu können. scripts:true, der erste Artikel erscheint, es gibt eine solche Einführung, aber es geht um extjs Wie lädt das 4.0-Panel die Seite und führt das Skript aus, also habe ich es anhand seines Codes getestet

Der Code kann erfolgreich ausgeführt werden! Ich war jetzt total begeistert, denn der Tab kann jede Komponente laden, und natürlich kann er auch das Panel laden, also habe ich meinen 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页面
  });
  });

erfolgreich geändert! Ich bin wirklich begeistert. Nach 4 Tagen habe ich endlich ein gutes Ergebnis erzielt. Diese Art von Freude kann nur unser technisches Personal verstehen. Das ist die gelbe Farbe über mir, renderTo:Ext.getBody(), muss tatsächlich gerendert werden, bevor das Skript normal angezeigt werden kann. !

Aber, aber... das ist keine perfekte Lösung. Vorsichtige Freunde werden wissen, dass das Skript die Ladeseite zuerst auf die Hauptseite lädt und nach dem Wechseln der Registerkarten verschwindet. Weil ich damals so aufgeregt war, habe ich es leider nicht bemerkt.

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

Ich musste mit dem Tippen auf der Tastatur aufhören und sorgfältig darüber nachdenken. Ich habe die Seite erfolgreich geladen und das Skript dreimal ausgeführt:

1 und als die Registerkarte aktiviert wurde

2. Klicken Sie nach dem Schlafen auf die Tabulatortaste und warten Sie, bis die Seite geladen ist.

3. Render hinzufügenZur Konfiguration

Nach langem Nachdenken habe ich endlich diese drei Erfolge gefunden Alle hatten eines gemeinsam: Die geladene Seite wird angezeigt, das heißt, wenn der Tab zuerst die Seite lädt und dann „gesehen“ wird, wird das Skript nicht ausgeführt.

Um meine zu überprüfen Idee, ich habe sofort mit dem Testen begonnen und den Ruhezustand auf 100 Millisekunden eingestellt, auf die Schaltfläche „Laden“ geklickt und dann nach 1 Sekunde auf die geladene Registerkarte geschaut. Tatsächlich wird das Skript nicht ausgeführt! ! !

Endlich den Grund gefunden:

Tab muss zuerst „angezeigt“ und dann geladen werden

, dann ist das einfach, überprüfen Sie sofort das SDK, es ist nicht schwer, die Show-Methode zu finden, also Ändern Sie den Code

OK, das Skript wird normal ausgeführt und mein Problem ist „perfekt“ gelöst

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen zum dynamischen Laden und Ausführen von Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!