1. 程式人生 > >Extjs6.2系列之動態設定主頁面(MainView)

Extjs6.2系列之動態設定主頁面(MainView)

在做qq登入時遇到一個情況,使用者在qq的第三方的登入介面授權成功後,qq賬號服務框架會開啟你設定的回撥頁面,並將授權資訊儲存在hash中,由於Extjs只有一個index.html頁面,其所有的檢視都由js程式碼在index.html上動態創建出來,這樣就不可避免的遇到這樣一個問題,如果你在app.js中設定的mainView是你的登入介面(不妨叫做loginView),那麼在qq登入成功後,瀏覽器打開回調視窗到網站首頁,網站首頁不應該是登入介面(loginView)而應該為你的內容頁面(不妨叫做indexView)。

要解決這個問題顯然至少有兩種方法,第一種就是網站登入部分做成一個獨立的工程,主頁面做成另一個工程,將qq的回撥地址指向主頁面的工程,這個方法有點死板,而且比較浪費資源,估計沒人會使用這個死辦法。第二種方法就是動態的設定應用的mainView,在首次訪問網站時將mainView 設定成loginView,qq授權後回撥開啟網站時將mainView設定成indexView,區別這兩種情況的方式就在於前面提到的url中的hash值是否包含qq授權資訊,app.js中的具體程式碼如下:

// mainView: 'MyMonitor.view.Login',
launch: function() {
    var s = location.hash.toString();//獲得url中包含的hash值
if(s){//如果hash值不為空,將頁面設定成網站內容介面,如果為空則設定成登入介面
this.setMainView('MyMonitor.view.main.Main');
}else {
        this.setMainView('MyMonitor.view.Login');
}
}
其實這裡有一點我比較疑惑,根據Extjs6.2的官方文件,launch方法會在頁面被載入完成時觸發(原文:Called automatically when the page has completely loaded.
),按照正常理解這裡的page指的應該是你設定的mainView,但是上面的程式碼並沒有配置mainView,貌似不符合頁面載入完成這一條件不能觸發launch函式,興許是我理解錯了吧,還望各位大神指教啊。 初寫部落格,內容難免有疏漏之出,還望多指正包涵