Skip to content

January 30, 2012

3

Mental picture of ExtJs 4 MVC Architecture

by Joe Kuan

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.

Advertisements
3 Comments Post a comment
  1. cool and clear ..

    Reply
  2. Feb 11 2014

    The most clear description of ExtJS MVC in one picture!

    I have one question is where to write the code that processing data? Is in store or model? It seems model in ExtJS MVC is not very well used.

    Thank you.

    Reply
    • Joe Kuan
      Feb 11 2014

      Thanks.

      Model is just a definition of data. Controller is what you do with the data.

      90% of your code should be located in the controllers which pick up the events through CSS selector style.

      Joe

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: