html - 在 Sencha 中使用路由的后退按钮支持

Question

我是 Sencha 的新手。谁能解释一下如何使用 Sencha touch2 Routing 在 android 中支持后退按钮。我已经浏览了 Sencha 文档，他们在那里解释了诸如“#products/123”之类的场景。但在我的情况下，只有视图会改变而不是总是像“../index.html”的url。

让我们考虑一下我有一个登录页面。在登录按钮点击它导航到主页。现在在设备后退按钮上点击它应该导航回登录。那么我应该在路由中输入什么格式：{}。

请任何人用简单的代码解释我。

提前致谢。

Answer 1

在您的按钮操作中，您应该像这样重定向：

 control: {
        'button[action=login]' : {
            tap: function() {
                this.redirectTo('login');
            }
        }

然后在控制器中添加路由：

config: {
    refs: {
        main: 'main'
    },

    routes: {
        'login': 'showLogin'
    }
}

最后在 showDetail 函数中更改视图，url 应该显示类似 index.html#detail 的内容：

showLogin: function() {
    this.getMain().push({
        xtype: 'loginView'
    });
}

我希望这有帮助！

Answer 2

在做了很多谷歌搜索之后，终于用适当的例子得到了答案。所以这是供参考http://thanksmister.com/?p_=336

Answer 3

您还可以通过定义后退按钮及其引用来更好地控制自己，而不是使用默认值。

Ext.define('Mov.view.BackButton', {
    extend: 'Ext.Button',
    alias: 'widget.backbutton',

    config: {
        hidden: true,
        id: 'back',
        ui: 'back',
        text: 'Back',
        backStack: {

        }
    },

    addToBackStack: function(dispatchOptions) {
        var found = false;
        this.backStack.forEach(function(el) {
            found = found || (Ext.encode(el) == Ext.encode(dispatchOptions));
        });
        if (!found) {
            this.backStack.push(dispatchOptions);
        }
        this.show();
    },

    clearBackStack: function() {
        this.backStack = [];
        this.hide();
    },

    handler: function(button, event) {
        var dispatchOptions = this.backStack.pop();

        Ext.dispatch(dispatchOptions);

        if(this.backStack.length === 0) {
            this.hide();
        }
    }
});

然后在应用程序的导航栏上应用此小部件。（初始视图的 onInitialize 效果很好）。

nav = this.getNavigationBar(),
nav.setBackButton(Ext.widget('backbutton'));

@jurodr 有一个很好的路由、引用和控制示例，它与这个自定义组件配合得很好。