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.

score 4 · Answer 1 · answered Mar 05 '13 at 20:14

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.

score 2 · Accepted Answer · answered Mar 07 '13 at 19:28

So i found a suitable solution that I believe works well.

On my page template I load Ext JS required files and use Loader.setConfig to specify location of ExtJS MVC folder structure:

<link href="<path>/ext-all.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<path>/bootstrap.js" charset="utf-8"></script>
<script type="text/javascript">
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'GS': '<path>/extjs/app") %>'
        }
    });
</script>

Then in my app folder, I have the following folder structure:

app/
   Models/
        User.js
        MyOtherModel.js

My User.js file contains:

    Ext.define('GS.Model.SimpleUser', {
       extend: 'Ext.data.Model',
       fields: [
           { name: 'UserID', type: 'int' },
           { name: 'Username', type: 'string' },
           { name: 'Firstname', type: 'string' },
           { name: 'Lastname', type: 'string' },
           { name: 'Email', type: 'string' }
       ],
       idProperty: 'UserID'
    });

Then, on every page I am using ExtJS, I just include the model through Ext.requires:

    Ext.require([
      'Ext.grid.*',
      'Ext.data.*',
      'Ext.util.*',
      'Ext.state.*',
      'Ext.toolbar.Paging',
      'Ext.tip.QuickTipManager',
      'GS.Model.SimpleUser'
    ]);

    Ext.onReady(function () {
        //app code here
    });

With this method, I can write re-usable code such as Models and Controllers and not have to go full MVC with a single viewport.

Just tried this approach in ExtJS 5 and it still works. – Dave Jul 01 '15 at 20:56 — Dave, Jul 01 '15 at 20:56

score 1 · Answer 3 · answered Mar 06 '13 at 02:49

The latest version of Sencha Cmd explicitly supports multi-page application development and deployment. If your dependencies are set up properly it allows you to create page-specific build packages to optimize loading and caching per page. Although from a practical standpoint, if the amount of overlapping code is large enough (and/or the total amount of code small enough) it might be better to KISS and just include all of your app classes in one file.

Yes, each page that uses Ext should typically use either Ext.onReady or Ext.application wrapping the app code. Whether or not you follow the MVC pattern is up to you and should be driven by your app's requirements and complexity. For simple cases it's often not merited, but for complex apps or team development it probably makes sense to follow MVC.

This seems to be the way it's heading. I've put all my Models into one file that just gets included before ExtJS code. I seem to be having issues if I try to use the features of convention that the MVC model provide but for a page by page basis — raj, Mar 06 '13 at 18:57
Sencha cmd is not a good solution for those of us doing development in Eclipse and Maven. — Dave, Jul 01 '15 at 17:55

ExtJS Architecture for Multi Page Application

3 Answers3

Linked