(For more resources related to this topic, see here.)
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
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:
Let us define the different models for our application. We will have the following models:
User
Department
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.
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.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…