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