model-view-controllerextjsarchitectureextjs-mvc

ExtJS Architecture for Multi Page Application


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.


Solution

  • 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.