ExtJS Architecture

About
Latest Posts

Goran

web developer at test

Latest posts by Goran (see all)

Deploy with Bitbucket + Webhook + PHP/Bash - August 17, 2016
How to setup Varnish Cache - December 17, 2015
ExtJS 6 – So what’s new? - October 29, 2015

ExtJS Architecture in short

ExtJS Architecture

ExtJS architecture uses MVC for project structure.
You can learn in detail how to setup ExtJS project here where Nenad shows basic usage of sencha cmd (sencha command line tool). In short after creating workspace and project within you will have folder structure similar or same as below.

Project overview

Goal of this post is to learn and understand project structure, how to create new ExtJS classes, how to manage and organize your code into files. But we will mention workspace a bit because it contains ExtJS source code, our project/s and packages.

Workspace

Workspace is central place where all our projects are, ExtJS libraries and packages.
Once you setup workspace you don’t need source code for every project. You can also create code packages and themes (packages folder) and use them in different applications or projects within workspace. We will mention ExtJS theme and packages creation in separeate post because it’s a topic that deserves more attention.

MVC

Ok you noticed where MVC structure is. MVC stands for Model-View-Controller so we have model, view and store folder. Our main controller is in Application.js so it’s not bad idea to add another folder “controllers” where we can create controllers for our application.

I recommend you to read about MVC in detail so you will better understand ExtJS Architecture.

In short…

– We define data in models, so for example “username” attribute would be defined as a string in model.
– ExtJS Stores use models to manipulate with data, for example get or send them to server, fill forms, grids, show ExtJS charts etc.
– Views are parts of application structure where we should put code that creates components that user will see and interact with them.
– All interactions, events, actions and even view loading should be managed in controllers.

ExtJS provides support for both MVC and MVVM application architectures. MVVM is something new and presented in ExtJS 5. I will try to write some article about MVVM because it introduces data binding which is pretty interesting concept in Java Script world today.

ExtJS Class definition

Ok we saw where files should be in general.
Ext is object oriented and it uses Java like standards for defining classes. We use Ext.define to define new classes.

/**
 * Some users model
 */
Ext.define('sampleApp.app.User', {
	extend: 'Ext.data.Model',
	fields: [
		'user_id',
		'username',
		'company',
		'status',
	],
	idProperty: 'user_id'
});

/**

* Some users model

Ext.define('sampleApp.app.User', {

extend: 'Ext.data.Model',

fields: [

'user_id',

'username',

'company',

'status',

idProperty: 'user_id'

});

So if file is in
workspace/someApp/app/model/User.js
class must be defined as
sampleApp.app.User. You get the point?

Those are called namespaces. ExtJS namespace structure is always the same

ApplicationName.Folders.ClassName

It’s really important to name classes properly and respect the folder structure. We talked in cmd post about production output of our application, It is a great way to prepare application for deploy.
Sencha production output will do the following for our project:

Minify and obfuscate our java script
Pack all css and js in 2 files so project load will have less requests
Compile ExtJS code
Other useful steps like caching etc

Sencha compiler is framework-aware so it knows what to do with ExtJS classes, how to read them and optimize our code. But compiler will do it’s best only if we name classes properly..

It’s really important for beginners to learn as much as possible about ExtJS Architecture. Because projects can become very big and things can get messy.

How application load all those files?

After creating ExtJS application our index.html looks like this

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">

    <title>MyApp</title>

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>MyApp</title>

</head>

</html>

ExtJS uses microloader to load all resources. Resources are described in well commented app.json file which is in root of the project. So you don’t need to add resourced manually to index.html or so.

To summarise…

We talked about ExtJS architecture that is recommended by sencha and common for every ExtJS application. Applications are stored in workspace which is container for

ExtJS source code
Our projects
Packages (themes etc)

Application launch is triggered in Application.js file. Core files are organized using MVC pattern and they are stored in app folder.
Class definitions are Java like, with namespace rules and application is loaded via ExtJS loader which is called microloader.

Check out next post where we cover application launch and classes in depth so you will round you knowledge about ExtJS architecture and class organization!