Навигация приложения ExtJS с помощью кнопки браузера

Question

У меня есть приложение ExtJS (версия 4.1.1) с одной страницей JSP, но несколько экранов, созданных с использованием компонентов Ext JS. Когда я нажимаю на кнопку «Назад» в браузере, я хочу отобразить последний посещенный экран в приложении, вместо того, чтобы использовать поведение браузера по умолчанию для перенаправления на последнюю посещенную веб-страницу.

Как я могу это достичь?

Answer 1

Вы должны использовать класс Ext.util.History, который предназначен для отслеживания навигации через кнопки «назад» и «вперед» браузера. Основная идея заключается в том, что когда пользователь посещает новый экран в вашем приложении, вы вызываете Ext.util.History.add() с токеном идентификатора для этого экрана. Затем, когда пользователь нажимает кнопку «назад» браузера, событие 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, которые предназначены для достижения того же, например, Ext.ux.Router от Bruno Tavares.