ExtJS Architecture for Multi Page Application

Question

I have a .NET application in which most of the UI is custom. On some of the pages, I am using ExtJS4 components, such as Grid, to display a table of Users for example. I also have another page where I display a user profile, and another page where I display an application form. There are many other pages that don't use ExtJS. I sparingly use ExtJS components and would like to have re-usable code for Stores and Models across all the pages where I use ExtJS.

I am familiar with ExtJS MVC architecture but all the documentation and examples demonstrate best practices for a single page ExtJS app.

For my scenario, I was looking for advice on what the best way to architect the ExtJS code is.

Should I just create the Stores and Models in a common JavaScript file and include that file on every page? Then create an instance of the Ext.Application or Ext.onReady for every page I would like to use ExtJS components? Or should I essentially be using a MVC architecture for each page in question just for a few components?

I just want to avoid copy/pasting code and have re-usability. Please recommend the best path to take.

Answer 1

I had to create an application that included several pages that were not ExtJS components. For me it was about 50/50 so a little more ExtJS than yours. Multiple instances of Ext.Application was not workable when I tried because of how the viewport was tied to it.

I ended up using one Ext.Application with a single viewport (which is nice for resize management), I created a "proxy" Ext.panel.Panel view for the other (non-ExtJS) pages and I dumped the content of the page into this panel's html config when it was rendered using a servlet - I did not want to use IFrames but I suppose that could be another option.

This worked out nicely for me and I was able to take advantage of the MVC achitecture like this.