MVC stands for Model-View-Controller. It is a software architecture pattern that separates the representation of the information from the user's interaction with it. The Model represents the application data, the View represents the output of the representation of the data (Form, Grid, Chart), and the Controller mediates the input converting it to commands for the Model or View.

Ext JS uses MVCS, which is a Model-View-Controller-Store pattern. The Model is a representation of the data we want to manipulate in our application, a representation of a table from the database. The Views are all the components and screens we create to manage the information of a Model. As Ext JS is event-driven, all the Views fire events when the user interacts with them, and the Controller will capture these events and will do something, redirecting the command to the Model (or Store) or the View. The Store in Ext JS is very similar to the DAO (Data Access Object) pattern used on the server side.

For a quick example, let's say we have a WidgetA which is a Grid panel that displays all the records from a table A. This table is represented by ModelA. StoreA is responsible for retrieving the information (collection of ModelA from the server). When the user clicks on a record from WidgetA, a window will be opened (called WidgetB) displaying information from a table B (represented by ModelB). And of course, StoreB will be responsible for retrieving the collection of ModelB from the server. In this case, we will have ControllerA to capture the click event from WidgetA and do all the required logic to display WidgetB and load all the ModelB information. If we try to put this in a quick reference diagram, it would be something like the following diagram:

We are going to create the application inside the htdocs folder of the xampp directory and our application will be named masteringExtjs.

Before we start, let's take a look how the htdocs folder looks like.

We have the Xampp files inside it and the Ext JS 4.2 folder.

The next step is to use the Sencha Cmd to create the application for us. To do so, we need to open the terminal application that comes with the operating system we use. For Linux and Mac OS users, it is the terminal application, and for Windows users, the command prompt application.

Here are the steps we are going to execute: first we need to change the current directory to Ext JS directory (htdocs/ext-4.2.0.663 directory in this case), and then we will use the following command:

sencha generate app Packt ../masteringextjs

The sencha generate app command will create the masteringextjs directory inside the htdocs folder with necessary file structure required by the MVC architecture. Packt is the name of the namespace of our application, meaning that every class we create is going to start with Packt, as for example: Packt.model.Actor, Pack.view.Login, and so on. And the last argument passed to the command is the directory where the application will be created. In this case it is inside a folder named masteringextjs, which is located inside the htdocs folder.

After the command finishes its execution, we will have something like the following:

But why do we need to create a project structure like this one? This is the structure used by Ext JS MVC applications.

Let's see what each folder does.

First, we have the app folder. This is where we will create all the code for our application. Inside the app folder we can find the following folders as well: controller, model, store, and view. We can also find the app.js file. Let's talk about each one:

We also have the app.js file. This is the entry point of the application. We will talk more about it in a few paragraphs.

Then, going back to the masteringextjs directory, we have a few more files and directories:

Let's start with the hands-on now!

First, we need to edit the app.js file. This is how the file looks like:

Ext.application({
    name: 'Packt',

    views: [
        'Main',
        'Viewport'
    ],

    controllers: [
        'Main'
    ],

    autoCreateViewport: true
});

We are going to change it so that it looks like the following:

Ext.application({ // #1

    name: 'Packt', // #2

    launch: function() { // #3
         console.log('launch');   // #4
    }
});

On first line of the previous code we have the Ext.application declaration (#1). This means that our application will have a single page and the parent container of the app will be the Viewport. The Viewport is a specialized container representing the viewable application area that is rendered inside the body tag of the HTML page (<body></body>). It also manages the application's size inside the browser and manages the window resizing.

Inside Ext.application we can also declare models, views, stores, and controllers used by the application. We will add this information to this file as we create new classes for our project.

We need to declare the name of the application which will be the namespace (#2).

We can also create a launch function inside Ext.application (#3). This function will be called after all the application's controllers are initialized and this means that the application is completely loaded. So this function is a good place to instantiate our main view. For now, we will only add console.log (#4), which just prints on the browser's JavaScript interpreter console to verify if the application was loaded successfully.

Ext.application = function(config) {
    Ext.require('Ext.app.Application');
    Ext.onReady(function() {
        new Ext.app.Application(config);
    });
};

To execute this application on the browser, we can access http://localhost/masteringextjs, and we will get the following output:

Now we need to start building the application.