Geek asks and answers

Url Navigation in WebApp Built with ExtJS

when developing a web application using ExtJS (with its MVC and Viewport), as a rule, there is no navigation option: each element on the page (buttons, text fields, text fields, ...) is bound to a specific view controller. Thus, when you travel through the application, the source URL is always the same and it does not change.

Now take an example application with a title menu bar filled with the following buttons:

Home | Setup | Archive

And the source URL of the application accepts the following:

http://www.mydomain.com/webapp

At this point, when someone clicks the "Home" or "Settings" or "Archive" button, a certain view is displayed in the central area and the URL should change to

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

So, if I click the "Settings" button, the following URL should be displayed in the address bar:

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

In addition, the same page should be displayed if I enter the same URL into the address bar from a different URL.

But for now, my webapp still remains at http://www.mydomain.com/webapp 'showing the requested view. (For example, MyApp.view.Setup).

What is it: how can I develop a webapp (with ExtJS, MVC and Viewport) with URL navigation? Is it possible to do without embedding javascript / html code in another PHP / Ruby / Python / $ RANDOM_SERVER_LANGUAGE? (I want to split the client by server)

: API ExtJS. , .htaccess, . , "", HTML . ?

. Wilk

+5
3

, : 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, ExtJS (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 , .

.

+3

ExtJs , : Ext.util.History.

, , . , @Wilk , , #! , #.

+2

" " MVC "".

sencha: https://market.sencha.com/extensions/ext-ux-router

url Ext.util.History ( @Lorenz Meyer):

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

. :

0

More articles:


All Articles