我是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和我定义的方法。每个配置属性都附加了标题栏作为其第一项。
当我尝试更改页面时,我通过控制器命令加载另一个视图,该命令会更改地址哈希值。路由控制器然后触发animateActiveItem方法,该方法加载另一个View(以前通过别名属性定义为xtype)。
我使用迈阿密编码器的教程(miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/)来学习Sencha Touch基础知识。
答案 0 :(得分:1)
我认为你的意思是标题栏而不是工具栏......
使用导航视图在视图之间导航而不是Ext.Viewport.animateActiveItem
这是一种更好的方法。要使用导航视图,请在sencha文档中使用本指南...
Sencha有着陡峭的学习曲线,所以要为这样的挫折做好准备......
答案 1 :(得分:0)
您可以在一个面板类中添加所需的视图,并使用
启用所需的视图mainclass.setActiveItem(0)
或者使用导航视图
答案 2 :(得分:0)
{
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'
}
]
}
]
}
希望它有所帮助...