Sencha touch 安卓后退按钮点击显示空白页面
我是新来的森查。几乎花了2天时间了解sencha路由/历史支持,以实现android后退按钮。尽管导航功能正常,但最终还是出现了空白屏幕。请帮助我找出我做错了什么,或者我的应用程序架构出了什么问题 app.jsSencha touch 安卓后退按钮点击显示空白页面,sencha-touch,extjs,sencha-touch-2,sencha-architect,Sencha Touch,Extjs,Sencha Touch 2,Sencha Architect,我是新来的森查。几乎花了2天时间了解sencha路由/历史支持,以实现android后退按钮。尽管导航功能正常,但最终还是出现了空白屏幕。请帮助我找出我做错了什么,或者我的应用程序架构出了什么问题 app.js Ext.application({ name: "WorkFlow", models: [], stores: [], controllers: ["WFController"], views: ["LoginForm","WorkList"],
Ext.application({
name: "WorkFlow",
models: [],
stores: [],
controllers: ["WFController"],
views: ["LoginForm","WorkList"],
launch: function () {
var loginForm = {
xtype: "loginform"
};
var workList = {
xtype: "worklist"
};
Ext.Viewport.add([loginForm,workList]);
// set up a listener to handle the back button for Android
if (Ext.os.is('Android')) {
document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false);
function onBackKeyDown(e) {
e.preventDefault();
// you are at the home screen
if (Ext.Viewport.getActiveItem().xtype == loginForm.xtype ) {
navigator.app.exitApp();
}else {
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'loginForm'
}));
}
}
}
}
});
LoginForm.js
var formPanel = null;
Ext.define("WorkFlow.view.LoginForm", {
extend: "Ext.form.Panel",
alias: "widget.loginform",
initialize: function () {
this.callParent(arguments);
formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'titlebar',
title: 'Login',
docked: 'top'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username',
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password',
},
{
xtype: 'textfield',
name : 'deviceId',
label: 'Device Id',
}
]
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Login',
handler: this.onLoginTap,
scope: this
},
{
xtype: 'button',
text: 'Cancel',
handler: function() {
formPanel.reset();
}
}
]
});
},
onLoginTap: function() {
this.fireEvent("loginCommand", this);
},
});
WorkList.js
Ext.define("WorkFlow.view.WorkList", {
extend: "Ext.form.Panel",
alias: "widget.worklist",
config:{
html: 'This is worklist...',
}
});
WFController.js
Ext.define("WorkFlow.controller.WFController", {
extend: "Ext.app.Controller",
config: {
refs: {
loginForm: "loginform",
workList: "worklist",
},
control: {
loginForm: {
loginCommand: "onLoginCommand",
}
},
routes: {
'loginForm': 'activateLoginFormPage'
}
},
activateLoginFormPage: function(){
Ext.Viewport.animateActiveItem(this.getLoginForm(), this.slideRightTransition);
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
onLoginCommand: function () {
var values = formPanel.getValues();
window.plugins.AuthPlugin.authenticate(values.username,values.passwordvalues.deviceId,values,
function loginCallBack(result){
if(result=="PASSWORD_MATCH"){
loginForm.onLoginSuccess();
}
});
},
onLoginSuccess: function(){
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'loginFormroute/workList'
}));
Ext.Viewport.animateActiveItem(this.getWorkList(), this.slideRightTransition);
},
launch: function () {
},
init: function () {
}
});
不完全确定您要完成什么,但如果只是常规导航(按back返回到上一个选项卡等),则无需将任何内容绑定到android back按钮。您应该使用routes并为用户执行的每个步骤创建一个历史记录项 示例:我有一个带有两个选项卡的应用程序,其中一个选项卡中有一个位置列表,第二个选项卡中有一个标记了相同位置的地图。按wither可在地图中的列表项或位置生成相同的详细信息屏幕。所以这就是我要让它工作的原因: 路线:
routes: {
'tab/:tabId': 'gotoTab',
'details/:stnId': 'viewDetails'
},
重要部分:确保为每个步骤创建历史记录项,我在这个应用程序中基本上有两个,一个用于更改选项卡,另一个用于打开详细信息页面。
因此,选项卡:
//If I change to the 'map' tab, it will navigate the browser to myapp.com/#tab/map
// and therefore creating a history item.
onTabpanelActiveItemChange: function(container, value, oldValue, options) {
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'tab/' + value.id
}), true);
},
与“我的详细信息”页面类似,只是它是从两个单独的处理程序(一个用于列表,一个用于映射)调用的函数:
在这之后,如果你能保证用户总是从主页开始,你就差不多准备好了。如果启用深度链接等,则需要恢复这些链接的状态。e、 g.a#/tab/map/link应在地图选项卡处于活动状态时打开应用程序
如果我们以我的详细信息页面为例,我们有几件事要做。首先,重新创建历史记录(按“详细信息”页面上的“上一步”,在我的应用程序中,默认情况下会返回到选项卡列表),然后确保已加载商店,依此类推
最后一个示例是我的viewDetails路线:
var store = Ext.StoreManager.get("dcStations");
//recreate history
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'tab/list'
}), true);
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'details/' + stnId
}), true);
//make sure the store is loaded, then show the details page with passed id
store.on("load", function() {
this.showDetails(Ext.StoreManager.get("dcStations").getById(stnId));
}, this);
希望这能促进您在开始路线和历史管理方面的努力
var store = Ext.StoreManager.get("dcStations");
//recreate history
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'tab/list'
}), true);
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'details/' + stnId
}), true);
//make sure the store is loaded, then show the details page with passed id
store.on("load", function() {
this.showDetails(Ext.StoreManager.get("dcStations").getById(stnId));
}, this);