Architecture ExtJS 5 for Single page web applications

Question

What is the right way of Architecture ExtJS 5 for Single page web applications.

• Is ExtJS good for "single page web applications(SPA)"? where we don't have multiple markup pages to refer different JS files to different urls. or rather, how best we can use ExtJS in SPA?
  • In detail: In www.domain/home.html I can refer tab.js that will load a tab layout, then user clicks on "about us" link, that will load a www.domain/about.html, here I refer aboutTree.js that will load tree widget on left panel. This looks easy. I can create a new JS file that will have a full store, model, OnReady() as shown in sencha document examples.
• How is Sencha ExtJS mainly used by most of its customers? as just widgets at some sections of their applications, or the whole application is drove by Sencha ExtJS?
• Can a full web application be driven by only ExtJS? I attempted one example for Sencha Touch for a mobile site, that can navigate to new pages with a single Url (Example: Sencha Fiddle or Practice Site). But is this possible for Web applications? Is there any sample that I can refer to how to navigate between pages using only Sencha ExtJS.
• Friendly URLs: If I follow this structured I attempted for mobile site "Practice Site" (only about and home links are handled) all pages in my site will always have /mobile.html url, how would I make it such a way it can have friendly urls, like /about, /contact and so on?

There is similar question on SO here ExtJS Architecture for Multi Page Application, but focusing on different concerns.

Answer 1

ExtJS is amazing for single page applications. It would be one of the better uses for it. I will answer in order.

1. In creation of a SPA, you should look into pulling the data in to your tabs through ajax calls if that is not a option and you only have static information you can have that html preset in panels. If you are forsaking the MVC paradigm like the way you are talking about in this first part, it is best to have each component built within a single onReady. If using the proper MVC/MVVM paradigms you will want to set up most of the application still under each component like set stores seperatly, models seperatly and call them all into the main application.js and use your controllers to manage the logic of your application. With both scenarios you should still only be calling a single index file and allowing ExtJS to manage your application instead of having multiple html pages.
2. ExtJS is used almost completely for creating full applications completly driven on the front end by ExtJS. The platform has so many features there is no reason to use anything outside of it if you are choosing to use it.
3. Yes ExtJS can fully drive your application. It is recommended though to have some backed set up to pull in data dynamically though otherwise you will just have a static page. Here is an example of the routing functionality in ExtJS Extjs 5 Guide Router
4. Just like in the last section the router will create friendly urls for your application. just take a look at the router.

From looking at what you are reffering to it might be best to break away from having those multiple html pages and allow ExtJS to do what it is meant to do maintain and control your whole application.