Architecting your applications with the MVC pattern

1. Start by editing index.html and add the files we require for our app:














2. We start the application with an instance of the Ext.app.Application class.
This contains our application name, a reference to the controller(s), and the launch
method that runs once everything has loaded. In app.js add:
Ext.application({
name: 'EnhancementLog',
controllers: ['Enhancement'],
launch: function(){
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'EnhancementGrid'
}]
});
}
});

3. Now that we have our application defined and ready to launch, let's deal with the
controller. Add the following code to Enhancement.js in the controller directory:
Ext.define('EnhancementLog.controller.Enhancement', {
extend: 'Ext.app.Controller',
stores: ['Enhancement'],
models: ['Enhancement'],
views: ['enhancement.EnhancementGrid'],
init: function() {
//initialization code
}
});

4. Then define the view (in our case an enhancement grid) in EnhancementGrid.js:
Ext.define('EnhancementLog.view.enhancement.EnhancementGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.EnhancementGrid',
title: 'System Enhancements',
store: 'Enhancement',
columns: [{
header: 'Title',
dataIndex: 'title',
flex: 1
}, {
header: 'Enhancement Description',
dataIndex: 'description',
flex: 3
}]
});

5. We now need to create a model and bind it to a store. The model is defined as follows:
Ext.define('EnhancementLog.model.Enhancement', {
extend: 'Ext.data.Model',
fields: ['id', 'title', 'description']
});

6. Finally we define a store (with some pre-defined data) like so:
Ext.define('EnhancementLog.store.Enhancement', {
extend: 'Ext.data.Store',
model: 'EnhancementLog.model.Enhancement',
data: [{
id: 1,
title: 'Search Field Autocomplete',
description: 'Could the main search field have an
autocomplete facility to increase my productivity.'
}]
});