3

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

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

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

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

或者对于此类应用程序是否有另一种方法？

4

1 回答 1

2

您可能想要使用视口，并使中心区域成为容器。

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

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

最大的错误是先更改 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 的表单已经隐藏在您的导航区域中，或者您想重用表单）

于 2012-05-24T19:41:12.583 回答