by applebomb[CSDN] ver:09-04-18
目前開發的方式是採用遠程load頁面來實現多頁面效果，類似於126郵箱多標籤頁效果。但是比126郵箱的方式更好，因為頁面開啟後是load到本地的，126似乎還會重新請求。在近期項目該開發方式已經基本成熟，積累了一些經驗，與各位開發人員共用和討論。
該方式的頁面配置為：一個bodylayout，左邊為導航樹，下方為資訊框。上部為企業或系統LOGO。center為一個tabpanel，tabpanel遠程載入頁面（不清楚AJAX遠程載入的請查閱EXT API之panel的autoLoad方法）。
由於該方式在頁面處理上已經和傳統的OPOA（One Page, One Application）有了很大的不同，導致了一些與之相關問題需要解決，以下是問題情境和我的解決方案：
1.如何在關閉子頁面的時候，由子頁面的代碼確定關閉事件？
問題情境：
需要處理該問題的情境太多了，例如若干組頁面成級聯邏輯關係，關閉一個頁面，其它幾個頁面也要關閉。例如一個PAGE開啟一級的級聯報表。
問題處理：
此類問題處理的關鍵是，需要找到標籤頁裡x按鈕關閉的那個Ext.panel。經事件可以按此方式獲得：
通過DOM樹位置尋找到該panel，這是最安全的方式，不需要知道panel的任何參數，你需要在你遠程載入的頁面的body下級裡先定義一個HTML元素，例如：
<body>
<div id="myrenderDiv"></div>
</body>
由於頁面通常是需要渲染一個對象元素成EXT組件。那麼該元素就是最好的尋找位置，接下來尋找上級Panel按此方式尋找（jquery方式，你也可以按Ext方式來search DOM）：
Ext.getCmp($('#myrenderDiv').parents('.x-panel')[0].id)
找到元素了，剩下的問題就很好辦了，監聽其destory方法就完成了關閉事件的處理
Ext.getCmp($('#myrenderDiv').parents('.x-panel')[0].id).on('destroy', function(){
alert('close myrenderDiv panel);
})
2.如何令子頁面元素根據Tabpanel的大小而自適應？
問題情境：
首頁面左邊是導航條，採用bodylayout方式，那麼左邊摺疊後。Tabpanel所處的center region就變大。需要自適應擴充TAB裡面的元素，例如表格寬度，以達充滿center region，實現最佳視覺和操作效果。
問題處理：
該方式關鍵的是去偵聽外部元素的resize時間，如問題1的方案一樣。找到了上級的容易panel，那麼就能夠有地方獲得寬高來調整需要適應元素的寬高及位置：
Ext.getCmp($('#myrenderDiv').parents('.x-panel')[0].id).on(
'resize',
function(refObj, adjWidth, adjHeight, rawWidth, rawHeight){
Ext.getCmp('myrenderPanel').setHeight(rawHeight);
Ext.getCmp('myrenderPanel').setWidth(rawWidth);
}
);
3.Tab頁的時間定時器如何處理？
問題情境：
某版面設定了定時器，在關閉後出現JS錯誤，發現是延遲定時器調用頁的元素不存在導致。
問題處理：
既然定時器只與調用頁有關，那麼該定時器應該在調用頁關閉時一併銷毀，見問題1，監聽如下實現：
var winSyncTimer = window.setInterval("Mypage.syncFunction()", 30000); //every 30 sec to synchronize
Ext.getCmp($('#myrenderDiv').parents('.x-panel')[0].id).on('destroy', function(){
window.clearInterval(winSyncTimer);
})
settimeout也類似此方式處理
4.AJAX非同步呼叫如何保證安全回調？
問題情境：
當一個比較佔用時間的AJAX調用後的時間，TAB頁被關閉了。但是隨後AJAX的callback卻執行了，由於頁面元素已經不存在，出現了JS錯誤。
5.採用此方式開關若干頁面後發現記憶體佔用很高，看似有嚴重你記憶體流失，問題原因是什嗎？
問題情境：
目前在規模化採用tabpanel遠程載入方式處理。當有10個以上不同的頁面被載入和釋放後。即使tabpanel僅留一個tab頁，記憶體還是佔用很高。
6.怎樣合理的管理各頁面的dom id和js命名？
問題情境：
混亂了混亂了。本來項目成員單獨的頁面都好好的，載入到標籤到tabpanel就工作不正常了，應該怎樣保證各頁面之間最低耦合并不出現衝突？
……………………(未完持續)
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
