Menu
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
606
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.
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.
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.
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.
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:
90
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 #.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
