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

когда вы разрабатываете веб-приложение с использованием ExtJS (с его MVC и окном просмотра), как правило, нет возможности навигации: каждый элемент на странице (кнопки, текстовые поля, текстовые области, ...) привязан к определенному методу контроллера представления . Таким образом, когда вы «путешествуете» по приложению, исходный URL-адрес всегда один и тот же и не меняется.

Теперь возьмем в качестве примера приложение с панелью меню заголовка, заполненной следующими кнопками:

Home | Setup | Archive

А исходный URL-адрес приложения принимает следующий вид:

http://www.mydomain.com/webapp

На этом этапе, когда кто-то щелкает меню «Главная», «Настройка» или «Архив», в центральной области отображается определенный вид, и URL-адрес должен измениться в

http://www.mydomain.com/webapp/[home|setup|archive]

Итак, если я нажму меню «Настройка», в адресной строке должен отображаться следующий URL-адрес:

http://www.mydomain.com/webapp/setup

Кроме того, та же страница должна отображаться, если я ввожу тот же URL-адрес в адресную строку с другого URL-адреса.

Но в настоящее время мое веб-приложение по-прежнему остается в «http://www.mydomain.com/webapp', показывая запрошенный Посмотреть. (например, MyApp.view.Setup).

Вот в чем суть: как мне разработать веб-приложение (с ExtJS, MVC и Viewport) с навигацией по URL? Можно ли обойтись без вложения кода javascript/html в другой PHP/Ruby/Python/$RANDOM_SERVER_LANGUAGE? (Я хочу разделить клиента на сервер)

Реализация этого уже существует: это документация ExtJS API< /а>. Если я прав, нет серверного приложения или .htaccess, которые предоставляют запрошенную страницу. На самом деле в главном каталоге есть папка с именем «source», которая содержит HTML-файл для каждого класса. Как они это делают?

Заранее спасибо. Уилк


web-applications client-side extjs restful-url client-server
person Wilk    schedule 08.05.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Хорошо, я нашел решение сам: P

Ну, это можно сделать следующим образом:

HTML-часть

<!DOCTYPE html>
<html>
<head>
    <title>Stackoverflow</title>
    <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../extjs-4.1.0/ext-all.js"> </script>
    <script type="text/javascript" src="sof.js"> </script>
</head>
<body>
    <a href="#!photos.html">Photos</a>
    <a href="#!info.html">Info</a>
    <a href="#!aboutme.html">About Me</a>

    <div id="results"></div>
</body>

Javascript part, done with ExtJS framework (sof.js)

// Loads each HTML part with an AJAX request
function loadAnchor (url) {
    Ext.Ajax.request ({
        url: url ,
        success: function (res) {
            // Edits results div with the new HTML part
            var r = Ext.get ('results');
            r.dom.innerHTML = res.responseText;
        }
    });
}


Ext.onReady (function () {
    var anchors = document.getElementsByTagName ('a');

    Ext.each (anchors, function (a) {
        a = Ext.get (a);
        // Attaches to each anchor the following function on click event
        a.on ('click', function (ev, anchor) {
            // Splits the hash, keeping the HTML requested
            var url = anchor.getAttribute('href').split('#!')[1];
            loadAnchor (url);
        });
    });

    // This is done without clicking an anchor, but by inserting directly the full URI
    // E.g.: http://www.mydomain.com/webapp/index.html#!info.html instead of clicking the anchor Info
    var url = document.location.hash.split('#!')[1];
    loadAnchor (url);
});

Как видите, каждый якорь связан с функцией javascript, которая загружает запрошенный ресурс с помощью запроса AJAX. Затем определенный контейнер (например, div) модифицируется с ответом (возможно, HTML-кодом или JSON, XML и т. д.).

Однако это должно быть сделано с веб-сервером, таким как Apache, но без серверного приложения: фактически каждый ресурс может быть чистым HTML-файлом, и для обслуживания этого файла не требуется серверное приложение.

Подробнее см.:

  1. Навигация по привязанным URL
  2. Обеспечение возможности сканирования приложений AJAX
person Wilk    schedule 11.05.2012

arrow_upward
2
arrow_downward

ExtJs имеет встроенный класс, который обрабатывает этот вариант использования: Ext.util.History.

Посмотрите на это пример, чтобы узнать, как это работает. Ссылки, которыми поделился @Wilk, объясняют, почему в качестве разделителя лучше использовать #!, а не только хэш #.

person Lorenz Meyer    schedule 20.03.2014

arrow_upward
0
arrow_downward

Обычно «навигация по URL-адресам» в рамках MVC реализуется через «маршруты».

Оформить следующий пакет на рынке сенча: https://market.sencha.com/extensions/ext-ux-router

Технически якорь URL может быть проанализирован с помощью Ext.util.History. (как отметил здесь @Lorenz Meyer):

    Ext.History.on('change', function(token) {
      // parse token and act
    });

Смотрите также:

person x'ES    schedule 30.05.2014