(For more resources related to this topic, see here.)

ExtJS-based application

In ExtJS, we will be dealing with the following classes:

• Ext.app.Application: This is the application class

• Ext.app.Controller: This class provides the controller functionality

• Ext.container.Container, Ext.Component: This class and its sub-classes are used for providing views

• Ext.data.Model: This class helps us represent a model which the Ext.data.Store class can understand

• Ext.data.Store: This class contains a collection of Ext.data.Model type objects and is used on the components to show a list of records

Folder structure

In Sencha MVC architecture, folder structure is very important as the underlying class loading uses the pre-defined rules, related to the folder structure, to load the classes automatically for us, on demand.

Create a folder named extjsapp under WebContent in the SenchaArchitectureBook project and add the following files and directories:

• app: This is the main application directory. This will have the model, view, controller, and store directories:

  • model

  • User.js

  • Department.js

  • store

  • Users.js

  • Departments.js

  • view

  • userList.js

  • userEdit.js

  • departmentList.js

  • Viewport.js

  • controller

  • Users.js

  • Departments.js

• data: This contains the JSON datafiles

• extjs-4.1.0-rc1: This contains the ExtJS framework

• app.js: This contains the entry point code for the application

• index.html: This is the HTML for the application

Once created, the folder structure should look like the following screenshot:

Model

Let us define the different models for our application. We will have the following models:

• User

• Department

User

Save the following code inside the appmodelUser.js file:

Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email','department'],
});

The code that we just used defines a User model, which represents a user in the application. AM.model in the class name is important as it is used by the loader to identify the file, which contains the class definition and loads the same. AM is the name of the application, which acts as a namespace. This has been explained, in detail, in the later part of this article.

Department

Save the following code inside the appmodelUser.js file:

Ext.define('AM.model.Department', {
extend: 'Ext.data.Model',
fields: ['code', 'name', 'location']
});

The code that we just used defines a Department model, which represents a department in the application.