javascript - 使用浏览器后退按钮的 ExtJS 应用程序导航

Question

我有一个 ExtJS(版本 4.1.1)应用程序，它具有单个 JSP 页面，但使用 Ext JS 组件创建多个屏幕。当我单击浏览器中的后退按钮时，我想在应用程序中显示上次访问的屏幕，而不是使用浏览器的默认行为重定向到上次访问的网页 em>.

我怎样才能实现这个目标？

Answer 1

您需要使用 Ext.util.History 类，旨在通过浏览器的“后退”和“前进”按钮跟踪导航。基本思想是，当用户访问应用程序中的新屏幕时，您调用 Ext.util.History.add() 带有该屏幕的标识符 token 。然后，当用户单击浏览器“后退”按钮时，会出现 change 事件是用用户导航回的屏幕的 token 触发的，您可以使用该 token 在应用程序中重新显示该屏幕。

ExtJS 文档有 history example展示如何做到这一点。代码的关键部分如下所示:

function onTabChange(tabPanel, tab) {
    var newToken;

    // ... construct a token for the new tab ...

    oldToken = Ext.History.getToken();

    if (oldToken === null || oldToken.search(newToken) === -1) {
        Ext.History.add(newToken);
    }
}

// ...

Ext.History.on('change', function(token) {
    if (token) {
       // ... set active tab based on token ...
    }
});

使用Ext.util.History如果您的应用程序中有很多屏幕，通常可能需要设置大量样板，因此 ExtJS 5 添加了内置 routing来帮助管理这个问题。 ExtJS 4 的扩展旨在完成同样的事情，例如 Ext.ux.Router 作者:布鲁诺·塔瓦雷斯。