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

Question

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

我怎样才能做到这一点？

Answer 1

您希望使用Ext.util.History课程，该课程旨在通过浏览器跟踪导航＆＃34;返回＆＃34;和＆＃34;前进＆＃34;纽扣。基本思想是，当用户访问应用程序中的新屏幕时，使用该屏幕的标识符标记调用Ext.util.History.add()。然后，当用户点击浏览器＆＃34;返回＆＃34;按钮，change事件会被用户导航回屏幕的标记触发，您可以使用该标记在应用程序中重新显示该屏幕。

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的扩展旨在完成同样的事情，例如Br​​uno Tavares的Ext.ux.Router。