在sencha touch 2的主视图中加载/切换子视图答案

【问题标题】：loading/switching child views inside main view in sencha touch 2在sencha touch 2的主视图中加载/切换子视图
【发布时间】：2015-02-07 09:47:04
【问题描述】：

我正在创建一个 Sencha Touch 应用程序，它有一个主视图，左侧面板和顶部标题栏。在中间，我想根据单击左侧项目加载不同的不同视图。我怎样才能做到这一点？如果我这样做Ext.viewport.add(view);，它将在我的主视图顶部添加新视图，使主视图的左侧面板不可见。

提前致谢

【问题讨论】：

标签： user-interface extjs sencha-touch-2

【解决方案1】：

我在使用导航视图之前做过这种事情-http://docs-origin.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.navigation.View

因此，您只需根据需要推送或弹出视图，因此一次只能看到一个，您仍然可以保留侧栏，因此当您单击侧栏项目时，您将执行推送，如文档中所示。

【讨论】：

不，但我不想使用导航视图。我有简单的容器视图，我想在主视图的子视图中显示它们。
那么导航视图将允许您做到这一点

【解决方案2】：

如果您不想使用Ext.navigation.View，Ext.Container 就足够了。使用其add() 方法添加一个子对象，在添加项目之前，您可以调用removeAll() 来删除现有对象。

无论如何，我看不出有任何理由不使用 Ext.navigation.View，它会为您处理卡片布局和动画。

你可以使用这样的布局：

MainView (Ext.Container) layout:hbox
  |_ TitleBar (Ext.TitleBar) docked:top
  |_ LeftPanel (Ext.Container) flex:1
  |    |_ (Ext.Button)
  |    |_ (Ext.Button)
  |_ ContentPanel (Ext.navigation.View) flex:2

您应该在 LeftPanel 按钮的 tap 事件上推送视图。

【讨论】：