How to create multi-page app with ExtJs 4

Question

I should create ExtJs4 app, which should have main menu, and each menu item should open a new page with different url, so if the user copies the url and pastes on other browser tab, the app should open that menu item.

I want to use ExtJs's recommended MVC architecture, but I don't know how I can use it with multiple pages/urls. All their examples are using single page.

One option is to reload the page each time when the user clicks on particular menu Item, so every url/menu item/page will be separate ExtJS app with it's MVC. But I think this approach has drawbacks, since the page will be reloaded every time and it's not good for performance. Also it's causes difficulties in reusing of components (common models, stores and views for different pages ).

So I would like to have one single app for all pages, but I don't know is there any solution to have different urls for different views (in my case: for different menu items).

Or is there another approach for such applications?

Answer 1

You would probably want to use a Viewport, and make the Center Region a Container.

The Center Region Container would usually have a Card or Tab layout.

When the user navigates to a new view (Component), you add that view to the Container, and make it active.

The big mistake is to change the URL first. You don't want to do that.

You want to navigate, and then set the URL if the navigation was successful. You should probably not use ExtJS's History component, as it is incorrectly implemented. I would recommend using HTML5 pushState.

You should make sure your navigation system works without changing the URL bar too.

I would recommend reading up on Navigation in Microsoft Prism, WPF, and Silverlight, as there is more documentation there, and then apply that to ExtJS.

http://msdn.microsoft.com/en-us/library/gg430881(v=pandp.40).aspx

Here is an example Navigation process:

• call app.requestNavigate('contacts/5'); you would add this yourself.

• you parse this fragment to:

navigationContext = {  
  fragment: 'contacts/5',  
  xtype: 'contacts-form',  
  parameters:{  
    id: 5  
  }  
}

OPTIONAL: If using forms:

• get active item from the navigation region (your center region). if exists, call confirmNavigationRequest(callback) . you will need to add this method or event.

• if callback(true), proceed with the navigation. this allows the user to cancel a navigation, if say the form is "dirty"

END OPTIONAL

• the easy way is to then create a new widget of navigationContext.xtype, add it to the navigation region, then call setActiveItem(widget). destroy the previous active item if it existed.

then call history.pushState(null, null, navigationContext.fragment)

then raise a 'navigatedto' event on the view, passing the context, and you can load the data from there.

More advanced scenarios include:

• keep the previous component alive if you expect to return to it. add a keepAlive property and if true, don't destroy when add new components to container.

• search the container and ask each component if it wants to handle the current navigation request (for example if a form loaded with contact-5 was already hidden in your navigation region, or if you want to re-use a form)