Extjs Sencha Touch 2-文本重叠问题

我是Sencha Touch 2的新开发人员，我正在尝试使用其提供的MVC架构创建我的第一个应用程序。在页面之间导航时，我发现工具栏/标题栏文本重叠问题。请看以下屏幕截图：

我不太清楚外面发生了什么。我正在使用animateActiveItem和路由方法在我的应用程序中移动

Users.js控制器文件，登录方法

// Ajax code here, not included here
// on ajax success:
this.redirectTo("login");

Routes.js控制器文件

routeLoginPage: function() {
    console.log("routeLoginPage");
    Ext.Viewport.animateActiveItem({ xtype: "loginpage" }, { type: "slide", direction: "left" });
},

有人真的遇到过这样的问题吗？我不知道现在该怎么办，因为我已经花了2天以上的时间试图解决这个问题

编辑

基本上，我需要在定义为视图的页面之间移动。我在包含属性的不同文件中定义每个视图：extend、requires、alias、config和我定义的方法。每个配置属性都将标题栏作为其第一项附加

当我试图更改页面时，我通过控制器命令加载另一个视图，该命令更改地址散列。Routes controller然后激发AnimateActivItem方法，该方法加载另一个视图（以前定义为xtype by alias属性）

---

我用迈阿密编码器教程（miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/）学习sencha touch的基础知识。

我想你指的是标题栏而不是工具栏

使用导航视图在视图之间导航，而不是使用

Ext.Viewport.animateActiveItem

这是一种更好的方法。要使用导航视图，请在sencha文档中使用此指南。。。 Sencha有一个陡峭的学习曲线，所以要准备好面对这样的挫折

---

我想你指的是标题栏而不是工具栏

使用导航视图在视图之间导航，而不是使用

Ext.Viewport.animateActiveItem

这是一种更好的方法。要使用导航视图，请在sencha文档中使用此指南。。。 Sencha有一个陡峭的学习曲线，所以要准备好面对这样的挫折

---

您可以在一个面板类中添加所需视图，并使用

mainclass.setActiveItem(0)

---

或者使用导航视图

您可以在一个面板类中添加所需视图，并使用

mainclass.setActiveItem(0)

{
    xtype: 'navigationview',
    id: 'navView',
    navigationBar: {
        hidden: true
    }

}

或者使用导航视图

{
    xtype: 'navigationview',
    id: 'navView',
    navigationBar: {
        hidden: true
    }

}

上面的代码将隐藏导航视图生成的标题栏。。。现在你需要像这样定义你自己的标题栏

{
       xtype: 'titlebar',
       title: 'title',
       items: [
            {
                   xtype: 'button',
                   text: 'back',
                   listeners: [
                     {
                         fn: function(button){
                              Ext.getCmp('navView').pop();//this will pop the view and show previous view
                         },event: 'tap'

                     }
                   ]
            }
       ]



}

希望对你有帮助

上面的代码将隐藏导航视图生成的标题栏。。。现在你需要像这样定义你自己的标题栏

{
       xtype: 'titlebar',
       title: 'title',
       items: [
            {
                   xtype: 'button',
                   text: 'back',
                   listeners: [
                     {
                         fn: function(button){
                              Ext.getCmp('navView').pop();//this will pop the view and show previous view
                         },event: 'tap'

                     }
                   ]
            }
       ]



}

---

希望对您有所帮助……

我认为。您添加视图的方式是错误的。如果你能提供你想要的细节，我可以帮忙。我只想在我的视图（而不是卡片）之间自由移动。我使用路由让应用程序在页面重新加载后跟上用户的操作。我不认为这很重要，但我也在努力理解routes功能。我认为。你添加视图的方式是错误的。如果你能提供你想要的细节，我可以帮忙。我只想在我的视图（而不是卡片）之间自由移动。我使用路由让应用程序在页面重新加载后跟上用户的操作。我不认为这很重要，但我也在尝试了解路线功能。谢谢你的链接。问题是我不确定导航视图是否适合我的应用程序。如果我不想要Sencha自动生成的后退按钮，而想用其他东西来替换它，该怎么办？还有，Android手机上的路由和硬件后退按钮呢？好问题，你可以隐藏自定义标题栏并创建自己的标题栏，我将在下面写下如何实现这一点路由就像书签功能，它只适用于手机浏览器，不适用于已安装的应用程序。。。不幸的是，安卓后退按钮在不同的设备上意味着不同的东西。。。在某些情况下，它只会从应用程序中退出，而在另一些情况下，它会终止应用程序…感谢您的链接。问题是我不确定导航视图是否适合我的应用程序。如果我不想要Sencha自动生成的后退按钮，而想用其他东西来替换它，该怎么办？还有，Android手机上的路由和硬件后退按钮呢？好问题，你可以隐藏自定义标题栏并创建自己的标题栏，我将在下面写下如何实现这一点路由就像书签功能，它只适用于手机浏览器，不适用于已安装的应用程序。。。不幸的是，安卓后退按钮在不同的设备上意味着不同的东西。。。在某些情况下，它只能从应用程序中退出，而在另一些情况下，它会终止应用程序。。。