ExtJS : Structuring your App

In the last post we saw the basic files required to write an ExtJS application. Let’s look into how to structure our app. It’s highly recommended to use this kind of architecture.

Key Files in Architecture:

Models are business entities like customers, accounts etc.

Stores are collection of model instances. A store must know a model class.

View display data contained by the stores.

Controllers maps events to actions. They listen on button within views and update stores.

Pre-Requisites : ExtJS API, Browser, Eclipse, Server
However, we wont be connecting to backend data, so eclipse/server may not be compulsory. You can just have folder like structure having your extjs API,and files arranged in a similar fasion like explained below.

Create a dynamic web project in Eclipse. Following figure shows the folder structure:

Index.html is your entry point. ‘extjs’ folder contains ExtJS API. As explained in previous tutorial ‘-all-’ will load all lib whereas other will load as needed. We need to load lib as we use it using ‘requires’ (eg. requires: [‘Ext.container.Viewport’]), for simplicity we will be using ‘all’ one. ‘resources’ contains your css/images etc. ‘app.js ‘ is starting point of your ExtJS code which will in turn call the model/view/controller.

Index.html is pretty much self explanatory. App.js contains global settings for your application, as well as maintains references to all of the models, views and controllers used by the app. It also contains a launch function, which is run automatically when everything is loaded.

All Ext JS 4 applications should only use a single global variable, with all of the application’s classes nested inside it (EmpDetails). employeeListFolder is where all your controller/view etc are. It also have launch function that creates a Viewport and single panel that will fill the screen.

Adding further:

View

A View is nothing more than a Component, usually defined as a subclass of an Ext JS component. We’re going to create our Employee grid now by creating a new file called employeeListFolder/view/EmployeeView.js and putting the following into it:

Here we are defining (Ext.define – Defines a class) our EmployeeView by extending grid panel as we are going to display data in a tabular format. ‘alias’ is use, so as to directly use this view as an xtype in our app.js. It must be preceded by ‘widget’ keyword. ‘title’ for panel heading. ‘columns’ for number of columns. ‘flex’ is used for setting relative width, i.e whatever be the final width of this panel, the ‘Name’ column will occupy 50% of it and the other 2 columns 25% each.

Controllers

Controllers are the glue that binds an application together. All they really do is listen for events (usually from views) and take some actions. Lets make a controller under employeeListFolder/controller/ EmployeeController.js