(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
Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at AU $24.99/month. Cancel anytime
-
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
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.
United States
Great Britain
India
Germany
France
Canada
Russia
Spain
Brazil
Australia
Singapore
Canary Islands
Hungary
Ukraine
Luxembourg
Estonia
Lithuania
South Korea
Turkey
Switzerland
Colombia
Taiwan
Chile
Norway
Ecuador
Indonesia
New Zealand
Cyprus
Denmark
Finland
Poland
Malta
Czechia
Austria
Sweden
Italy
Egypt
Belgium
Portugal
Slovenia
Ireland
Romania
Greece
Argentina
Netherlands
Bulgaria
Latvia
South Africa
Malaysia
Japan
Slovakia
Philippines
Mexico
Thailand
