如何創建與ExtJS的4

Question

我應該創建ExtJs4應用程序，它應該有主菜單多頁的應用程序，並且每個菜單項應與不同的URL打開一個新頁面，所以如果用戶將其他瀏覽器的URL和粘貼標籤，應用程序應該打開該菜單項。

我想用ExtJS的推薦的MVC架構，但我不知道我怎麼能多頁/ URL使用它。他們的所有例子都使用單個頁面。

一種選擇是，在每次重新加載頁面，當用戶點擊特定的菜單項，所以每一個網址/菜單/頁都是獨立的ExtJS的應用程序與它的MVC。但我認爲這種方法有缺點，因爲每次都會重新加載頁面，並且不利於性能。此外，它還會導致重新使用組件（常見模型，商店和不同頁面的視圖）出現困難。

所以我想對所有的網頁單一的應用程序，但我不知道有沒有什麼解決方案有不同的看法不同的URL（在我的情況：針對不同的菜單項）。

或者是否有另一種方法來處理這些應用程序？

Answer 1

您可能想要使用視口，並將中心區域設置爲容器。

中心區域容器通常會有卡片或標籤佈局。

當用戶導航到一個新的視圖（組件），你該視圖添加到容器中，並使其活躍。

最大的錯誤是首先更改網址。你不想這樣做。

要導航，然後在導航成功時設置URL。你可能不應該使用ExtJS的歷史組件，因爲它不正確的實現。我會推薦使用HTML5 pushState。

你應該確保你的導航系統在沒有改變URL欄的情況下工作。

我會建議在微軟棱鏡，WPF和Silverlight的導航讀書了，因爲有更多的文檔存在，然後應用到ExtJS的。

http://msdn.microsoft.com/en-us/library/gg430881(v=pandp.40).aspx

下面是一個例子導航過程：

• 通話app.requestNavigate('contacts/5');你會變成這樣自己添加。

• 你解析這個片段：

navigationContext = { 
    fragment: 'contacts/5', 
    xtype: 'contacts-form', 
    parameters:{ 
    id: 5 
    } 
} 

可選：如果使用形式：

• 從導航區域獲得活躍項目（你的中心區域） 。如果存在，請致電confirmNavigationRequest(callback)。您將需要添加此方法或事件。

• if callback(true)，繼續進行導航。這允許用戶取消導航，如果說形式是「髒」

END可選

• 簡單的方法是再創建一個新的navigationContext.xtypewidget，將其添加到導航地區，然後致電setActiveItem(widget)。如果存在，則銷燬前一個活動項目。

然後調用history.pushState(null, null, navigationContext.fragment)

然後在視圖養「navigatedto」事件，傳遞上下文，你可以從那裏加載數據。

更高級的方案包括：

• 保持現有的組件還活着，如果你希望返回到它。添加一個keepAlive屬性，如果爲true，則在向容器中添加新組件時不要銷燬。

• 搜索容器並詢問每個組件是否要處理當前的導航請求（例如，如果加載了contact-5的表單已經隱藏在您的導航區域中，或者您想要重新使用表單）