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

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:

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.