Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Url navigation in a WebApp built with ExtJS

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:


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


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


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

like image 606
Wilk Avatar asked May 08 '12 13:05


People also ask

Is ExtJS still popular?

Even though ExtJS is well known among many coders, the technology is not globally spread. Nevertheless, this framework is most often used by big companies. They use the tool to develop production software and create other complex applications.

Where is ExtJS used?

Ext JS is a popular JavaScript framework which provides rich UI for building web applications with cross-browser functionality. Ext JS is basically used for creating desktop applications. It supports all the modern browsers such as IE6+, FF, Chrome, Safari 6+, Opera 12+, etc.

What is requires ExtJS?

Requires - All classes required to be defined for the class to be instantiated. Uses - A list of classes potentially used by the class at some point in its lifecycle, but not necessarily requried for the class to initially be instantiated. Subclasses - Classes that extend the current class.

Is ExtJS single page application?

Ext JS by Sencha is becoming the ExtJS is a rich, compelling and intuitive open source framework best suited for building single page applications. It offers very rich set of UI components and thus giving a tough competition to other JavaScript frameworks like AngularJS or ReactJS.

2 Answers

Ok, I found the solution by myself :P

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

HTML part

<!DOCTYPE html>
    <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>
    <a href="#!photos.html">Photos</a>
    <a href="#!info.html">Info</a>
    <a href="#!aboutme.html">About Me</a>

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

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
like image 90
Wilk Avatar answered Sep 28 '22 06:09


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 #.

like image 32
Lorenz Meyer Avatar answered Sep 28 '22 06:09

Lorenz Meyer