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 a

Answer 1

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.

Answer 2

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.

Answer 3

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.