Url navigation in a WebApp built with ExtJS

Question

when you develop a web application using ExtJS (with its MVC and a Viewport), generally there's no possibility to navigate: every item into the page (buttons, textfields, textareas, ...) is bound to a specific method of the view's controller. So, when you 'travel' through the application, the original URL is always the same and it doesn't change.

Now, take as example an application with a header menu bar filled with these following buttons:

Home | Setup | Archive

And the original URL of the application take the following:

http://www.mydomain.com/webapp

At this point, when someone click Home or Setup or Archive menu a certain view is displayed into the center region and the URL should change in

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

So, if I click Setup menu the following URL should be displayed in the address bar:

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

Further more, the same page should be shown if I type the same URL into the address bar from another URL.

But currently my webapp still remains into 'http://www.mydomain.com/webapp' showing the requested view. (MyApp.view.Setup, for instance).

That's the point: how can I develop a webapp (with ExtJS, MVC and Viewport) with URL navigation? Is it possible to do without nesting javascript/html code into other PHP/Ruby/Python/$RANDOM_SERVER_LANGUAGE? (I want to split client by server side)

An implementation of this already exists: it's the ExtJS API Documentation. If I'm right, there's no server-side application or .htaccess that provide the page requested. In fact, there's a folder called 'source' into the main directory that contains an HTML file for each class. How they do that?

Thanks in advance. Wilk

score 3 · Accepted Answer · answered May 11 '12 at 11:14

Ok, I found the solution by myself :P

Well, this kind of thing could be done by the following way:

HTML part

<!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);
});

As you can see, each anchor is bound with a javascript function that loads the requested resource by an AJAX request. Then, a certain container (a div, for example) is modified with the response (maybe HTML code or JSON, XML, etc...).

However, this thing has to be done with a server web like Apache but without a server application: in fact, each resource can be a pure HTML file and no server app is needed to serve those file.

For further details, see:

score 2 · Answer 2 · answered Mar 20 '14 at 09:50

2

ExtJs has a built in class that handles this use case: Ext.util.History.

Look at this example to find out how it works. The links that @Wilk shared explain why it is better to use #! as a separator, and not only a hash #.

answered Mar 20 '14 at 09:50

Lorenz Meyer

19,166
22
75
121

score 0 · Answer 3 · answered May 30 '14 at 02:56

Usually "url navigation" in MVC frameworks are implemented through "routes".

Checkout following package in sencha market: https://market.sencha.com/extensions/ext-ux-router

Technically url anchor may be parsed using Ext.util.History (as @Lorenz Meyer noted here):

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

Url navigation in a WebApp built with ExtJS

3 Answers3