Home/ Questions/Q 7938895
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T22:56:03+00:00

when you develop a web application using ExtJS (with its MVC and a Viewport),

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I found the solution by myself 😛

    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:

    1. Anchored based URL navigation
    2. Making AJAX Applications Crawlable
    • 0