ExtJS Architecture system and organization explained

26 Jun


web developer at test

Latest posts by Goran (see all)

ExtJS Architecture in short

ExtJS Architecture

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.

Ext JS Architecture

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 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.


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.

So if file is in
class must be defined as
sampleApp.app.User.  You get the point?

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


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

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!