如何使用 ExtJs 4 创建多页应用程序

Question

我应该创建 ExtJs4 应用程序，它应该有主菜单，并且每个菜单项应该打开一个具有不同 url 的新页面，所以如果用户复制 url 并粘贴到其他浏览器选项卡上，应用程序应该打开该菜单项。

我想使用 ExtJs 推荐的 MVC 架构，但我不知道如何将它与多个页面/url 一起使用。他们所有的例子都使用单页。

一个选项是每次用户单击特定菜单项时重新加载页面，因此每个 url/菜单项/页面将是单独的 ExtJS 应用程序及其 MVC。但我认为这种方法有缺点，因为每次都会重新加载页面，这对性能不利。此外，它还会导致组件重用的困难（不同页面的通用模型、商店和视图）。

所以我想为所有页面使用一个应用程序，但我不知道是否有任何解决方案可以为不同的视图设置不同的 url（在我的情况下：用于不同的菜单项）。

或者对于此类应用程序还有其他方法吗？

Answer 1

您可能希望使用视口，并将中心区域设置为容器。

中心区域容器通常具有卡片或选项卡布局。

当用户导航到新视图（组件）时，您将该视图添加到容器中，并使其处于活动状态。

最大的错误是先更改 URL。你不想那样做。

您要导航，如果导航成功则设置 URL。您可能不应该使用 ExtJS 的 History 组件，因为它的实现不正确。我建议使用 HTML5 pushState。

您应该确保您的导航系统在不更改 URL 栏的情况下也能正常工作。

我建议阅读 Microsoft Prism、WPF 和 Silverlight 中的 Navigation，因为那里有更多文档，然后将其应用于 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) 。您将需要添加此方法或事件。

• 如果callback(true)，继续导航。这允许用户取消导航，如果说表单是“脏的”

结束可选

• 最简单的方法是创建一个新的widget 的navigationContext.xtype，将其添加到导航区域，然后调用setActiveItem(widget)。销毁之前的活动项目（如果存在）。

然后拨打history.pushState(null, null, navigationContext.fragment)

然后在视图上引发 'navigatedto' 事件，传递上下文，然后您可以从那里加载数据。

更高级的场景包括：

• 如果您希望返回之前的组件，请保持它处于活动状态。添加 keepAlive 属性，如果为 true，则在向容器中添加新组件时不要销毁。

• 搜索容器并询问每个组件是否要处理当前的导航请求（例如，如果加载了 contact-5 的表单已经隐藏在您的导航区域中，或者如果您想重新使用表格）