ページを動的にロードして実行する例の詳細な説明

ExtJS 4.1 TabPanel はページを動的にロードしてスクリプトを実行します。これを書くのに数日かかりましたが、完成した後はとても興奮しています。コードを書くプロセス全体をあなたに。

公式の例によると、ページは動的にロードできますが、スクリプトは実行されないため、SDKとGoogleを確認したところ、スクリプトをtrueに設定する必要があることがわかったので、この属性を設定しましたコード全体は次のとおりです。以下の通りです

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

最初、ページを読み込むスクリプトはこのように書かれているのかと思いました 質問、色々調べたところ、6c04bd5ca3fcae76e30b72ad730ca86dに書くべきだという人もいれば、6c04bd5ca3fcae76e30b72ad730ca86dにしか書けないという人もいましたページ上にあり、src で js ファイルを参照することはできませんが、どのように試しても、ページの読み込み時にポップアップ ウィンドウが表示される限り、ページの読み込みは非常に簡単でした

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

最初はこれで終わり、一日でタブを完成させるだろうと思っていましたが、興奮していたら、このアプローチには問題があることに気づきました。タブをクリックするたびに、バックグラウンドページが一度読み込まれると、アクティベーションイベントがトリガーされます。私が望む効果は、フォアグラウンドが一度読み込まれた後、タブを切り替えるときにバックグラウンドに再度アクセスする必要がないことです。そこで、SDKとGoogleを確認し、activateイベントでタブが読み込まれたかどうかを判断しようとしましたが失敗しました。翌日、リスナーを削除し、読み込まれたページの読み込み効果をテストしたいと思いました。その理由は、ページのスレッドを意図的にブロックし、次のコードを追加しました

System.Threading.Thread.Sleep(5000);

今回は意図的ではなく、5 秒後に読み込まれたページが実際にスクリプトを正常に実行できることがわかりました。 ！

私の手順は次のとおりです: ロードボタンをクリックし、動的にロードされたタブをクリックします。5 秒後にコンテンツが表示され、スクリプトが実行されます

ただし、ロードされたページは常にスリープ状態になるわけではありません。情報を確認して試し続け、extjs のソースコードのデバッグを開始しました。ページを切り替えるには次のスクリプトを使用します。デバッグ グーグルはたくさんありますが、一日デバッグしましたが、役に立ちませんでした。しかし、extjsのコードに触れるのは初めてです

そして、デバッグ中に、Sleep(5000)を追加してもロードされたページスクリプトが実行できないという奇妙なことも発見し、ますます困惑しました

。 3 日目、私は狂ったように QQ グループに参加し、さまざまなフォーラムや Web サイトに投稿し、Google を続けましたが、役に立ちませんでした

4 日目には、幸運にも Microsoft Bing を使用して autoload:true を検索することができました。 scripts:true、最初の記事が出てきて、こんな紹介がありますが、extjsについてです 4.0 パネルはどのようにページをロードしてスクリプトを実行するので、そのコードに従ってテストしてみました

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

コードは正常に実行できます。タブは任意のコンポーネントを読み込むことができ、もちろんパネルも読み込むことができるので、私は今完全に興奮していました。それで、コードを変更

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页面
  });
  });

して成功しました! 4日間かけてようやく良い結果が得られたので、本当にうれしく思います

コードの違いを比較して、そのような設定が欠けていることがわかりましたので、マークしました。上の黄色の部分、renderTo:Ext.getBody() は、スクリプトを正常に表示する前にレンダリングする必要があります。なぜ SDK がないのでしょうか。 ！

しかし、しかし...これは完璧な解決策ではありません。スクリプトが最初にロードページをメインページにロードし、タブを切り替えると消えるという深刻な問題は、私が興奮しすぎたためであることがわかります。残念ながら、時間が見つかりませんでした。

私はキーボードでの入力をやめて、ページを正常にロードしてスクリプトを 3 回実行する必要がありました。この 3 回は、

1. タブがアクティブになったときです。2. スリープした後、タブをクリックして待ちます。ページの読み込み済み

3. renderTo 設定を追加します

長い間考えた結果、これら 3 つの成功には、読み込まれたページが表示されるという共通点があることがわかりました。最初にページを表示し、その後、再度「表示」された場合、スクリプトは実行されません。私のアイデアを検証するために、すぐにテストを開始し、スリープを 100 ミリ秒に設定し、ロード ボタンをクリックして、ロードされた内容を確認しました。 1 秒後にタブをクリックすると、スクリプトは実装されていません。 ！ ！

最終的に理由がわかりました。

タブを最初に「表示」してからロードする必要があります

、その後は簡単です。すぐにSDKを確認し、showメソッドを見つけるのは難しくないので、コードを修正します

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

OK、スクリプトは正常に実行されます。これが私の問題に対する「完璧な」解決策です

以上がページを動的にロードして実行する例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。