Mental picture of ExtJs 4 MVC Architecture

In my previous blog of HighCharts extension for ExtJs 4 which I have followed the Sencha recommended MVC architecture implementation. To be honest, I have to read that documentation a few times to grasp the picture in my head. Then I scribbled on my whiteboard to make it look simple and the above picture is the final draft of a thousand words.

As you can see, this MVC approach split your app into many small files that most of them are just class definitions. Ext.application contains a reference to the Controller class(es), the appFolder field helps to resolve into a path to look for the Controller class. Then the Controller class have further references to its associated view, store and model classes which the declarations in view classes are binding to stores which also bind to the models. For example:

Ext.define('HighCharts.controller.Charts', {
  extend : 'Ext.app.Controller',
  views : ['chart.Tree'],
  models : ['Chart'],
  stores : ['ChartsTree'],

This offers a clean cut to solely concentrating on classes definitions in view, store and models.
The main backbone of the application is the Controller. These Controller classes contain implementation of all the actions behaviour for it’s entity.

About these ads