ExtJS Class System

ExtJS class preface

Java Script is prototype oriented language. It is very flexible, many problems can be solved with different solutions which comes with cost of being unpredictable and difficult to maintain.. ExtJS is state of the art when it comes to code organisation. Now let’s talk about ExtJS class in detail.

Ext comes with hundreds of classes. You will learn how to use their classes, or extend them to create yours. I will cover main application launch class, controllers, viewControllers, stores, models, views, viewModels. Those are pretty much all class types you will use with ExtJS.

Conventions

Class names may contain only alphanumeric characters. We talked in previous post about namespaces and dot notation. Just to remind you again it’s a pretty powerful concept that ExtJS lies on. Top level namespaces and class names should be camel case and folder names lower case:

MyCompany.form.action.AutoLoad

Don’t use Ext as a namespace for your classes because Sencha uses it, so you may have conflicts. Respect one class-one file rule.

Variable and method names apply same rules as classes.

Application class

Let’s create sample application in our workspace.

Now go to application root and open app.js

This is actually the initiator of app/Application.js which is also created automatically. Application.js is our main application which loads our main view. It’s also a central place for some global settings like application namespace, shared stores etc.

Views

You noticed config autoCreateViewport config in app.js

This config tells the ExtJS application which view to use as our main Viewport.

Views are visible part of our application. They are extended from Ext.Component. I will cover views and every each class types extensively in separate posts.

Let’s preview our viewport view located in Basic/app/view/main/Main.js

Please take you time and analyze this view class definition and where the file is located in our project. You probably noticed that this view doesn’t contain any application logic. That’s because logic should be in controllers. We have requires property that includes 2 files.. One is controller which is assigned to this view with controller property

Controllers

Sencha created starter controller MainController.js. We sawed in previous text how controller is assigned to our view. One of controller purpose is to monitor view and listen events.

This controller is extended from Ext.app.viewController which means that it can use all it’s methods. We already can see bits of logic in this like onClickButton method which opens a confirm dialog to users screen. Try to find onClickButton function in view file and figure out how and when it is called.

View Model

ExtJS View Models are introduced in ExtJS 5, so Ext has data binding features now. In our view similar to controller we have viewModel config where we connect viewModel to that view. ExtJS View model is a data provider for the view and it’s child components. Data is used mostly by adding bind config to the components that shows or edit data.

 

We can see how the title of our panel is passed through viewModel. More details about data binding in data section of the blog.

Models

We don’t have model classes in our sample project but we will generate one with sencha cmd. Go to project root and type next:

This will generate model by default in app/model so you don’t have to worry about namespaces and no need to type data manually.

Ok we have a model, what to do with it you may wonder..
Defining a model ExtJS class is like defining columns in MySQL database (if you are a backend developer). Model stores fields for the data, and their properties.. We can see from our newly created ExtJS model that first field has the name id and is type of int or integer. And so on, we can define more fields or even add functions that will “model” or better to say describe our data.

If you do not include the fields config, data will be automatically read and inserted into the data object. You will want to define your fields if your data needs:

• Validations
• Default values
• Convert functions

Models are used in conjunctions with stores. Let’s set up a store and see these two work together.

Store

Stores are consumed by components like grids or charts for example. Let’s imagine a grid that will list users. We need to make a new ExtJS Class, the Store class which will provide data for our grid.

Our store will make ajax request via proxy to a file users.json and get content of that file.

Proxy is used by store to handle the loading and saving of data. Usually there is no need to create a proxy and interact with it directly.

Types of Proxy

The Client proxy which saves data locally and include the following subtypes: LocalStorage, SessionStorageProxy, MemoryProxy

The Server proxy which saves data by sending requests to a remote server. Subclasses are: Ajax, JsonP, Rest and Direct that uses Ext.direct.Manager

The above proxy is configured to consume a data like this

Conclusion

We covered all types of classes that you need to make pretty advanced applications. Along with the previous post this was a introduction of ExtJS core concepts. We learned architecture basics, where to put and how to create classes. Now I will go in detail to explain each type of ExtJS class in separate post. I will spent some time writing about ExtJS stores for example etc.
It can be tricky to understand how all described components interact together. Don’t hesitate to ask and I will try to help in my spare time.