ExtJS 4.1 TabPanel動態載入頁面並執行指令碼【轉】，extjstabpanel
ExtJS 4.1 TabPanel動態載入頁面並執行指令碼
按照官方樣本，可以動態載入頁面，可是指令碼不執行，於是查SDK、google，發現scripts需要設定為true，於是設定該屬性，整個代碼如下
tabPanel.add({
title: 'dynamic page',
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }
});
剛開始以為載入頁面的指令碼寫的有問題，因為查了很多資料，有人說要寫在<body>裡面，有人說只能寫在頁面上，不能用src引用js檔案，但無論怎麼試也不行，我的載入頁面很簡單，只要頁面被載入就出彈窗
<script type="text/javascript">
alert("addd");
</script>
後來想，是不是需要在tab被啟用的事件手工load，而不是autoLoad，於是再次實驗，終於成功了，興奮！
tabPanel.add({
title: 'dynamic page',
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }
listeners: {
activate: function(tab){
tab.loader.load();
}
}
});
本來想著到此為止，一天時間總算搞定這個tab，但是興奮之餘發現，該做法是有問題的，每次點擊tab，都會觸發啟用事件，去讀取後台頁面一次，而我想要的效果是，前台載入一次之後，切換tab也不要再訪問後台。於是查SDK、google，想在activate事件裡，判斷tab已經load，但是未果
第二天，去掉了listeners，然後莫名其妙想測試載入頁面的loading效果，特意將頁麵線程阻止，加入以下代碼
System.Threading.Thread.Sleep(5000);
這次是無心插柳，發現隔了5秒載入的頁面，居然能正常執行指令碼了！
我的操作步驟如下：點了載入按鈕，然後點擊動態載入的tab，該tab無內容，隔了5秒，內容出現，指令碼執行
但是被載入的頁面不能總是被sleep，於是繼續查資料繼續試，甚至開始調試extjs的原始碼，這裡說下如何調試，頁面切換以下指令碼
<script type="text/javascript"src="/Scripts/ext/ext-all.js"></script>改為
<script type="text/javascript"src="/Scripts/ext/ext-debug.js"></script>
如何調試就不解釋了，google多的是，調試了一天，無果。不過對extjs的代碼算是有了第一次親密接觸
而且還發現一個奇怪的事情，在調試的時候，就算加入了Sleep(5000)，載入的頁面指令碼也無法執行，越來越納悶
第三天，狂加QQ群，各論壇網站發帖，繼續google，無果
第四天，算是我點幸，用微軟的bing搜尋autoload:true,scripts:true，出來的第條，就有這樣的介紹，不過是講extjs4.0的panel如何載入頁面執行指令碼的，於是按照它的代碼測試
Ext.onReady(function () {
var panel = Ext.create('Ext.Panel', {
title: 'AnchorLayout',
renderTo:Ext.getBody(),
loader:{ url: "test.htm",autoLoad:true,scripts:true}//載入1.htm頁面
});
});
該代碼居然能成功執行！這下徹底興奮了，因為tab可以載入任意的component，當然也可以載入panel，於是修改My 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);
成功了！真的狂喜，花費4天下來，總算是有個好的結果，這種喜悅，只有我們技術人員才能理解到
比較代碼差異，發現就少了這麼一個配置，就是我上面黃色標出來的，renderTo:Ext.getBody()，居然，居然要被render一下，才能正常顯示指令碼，為什麼SDK沒有！！
但是，但是……這也不是一個完美的解決辦法，細心的朋友就知道，該指令碼會把載入頁面首先載入到首頁面上，切換tab才會消失，這麼嚴重的問題，因為當時太興奮，居然沒有發現，唉。
不得不停下敲鍵盤的手，仔細思考起來，我有3次載入頁面執行指令碼成功，這3次分別是
1、tab被activate的事件中
2、sleep之後點擊tab等待頁面載入好
3、加入renderTo配置
經過長時間思考，終於發現這3次成功的時候，都有個共同點，載入的頁面被顯示出來了，也就說，如果tab先load頁面，然後再“被看見”，那指令碼就不執行了
為了驗證我的想法，於是馬上動手測試，把sleep設為100毫秒，點擊載入按鈕，隔了1秒再去看載入出來的tab，果然指令碼不執行了！！！
總算找到原因：tab必須先“展現”出來，然後再去load，那這就簡單了，馬上查SDK，不難發現show這個方法，於是修改代碼
tabs.add({
title: 'dynamic page',
//renderTo: Ext.getBody(),
loader: {
url: 'test.htm',
loadMask: 'loading...',
autoLoad: true,
scripts: true
}
}).show();
OK，指令碼正常執行，到此我的問題“完美”解決
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
