Sencha Application Architecture

Before starting

Before starting, install Sencha Cmd and Ext JS, and review Introduction to Application architecture


File Structure

Ext JS applications follow a unified directory structure that is the same for every app. Here is typical directory structure as created by the sencha app build command...

Here an index.html file as generated by Sencha Cmd...

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">

    <title>MyApp<title>

    <!-- Build the application -->

    <script id="microloader"
            type="text/javascript"
            src="bootstrap.js"><script>

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


app.json

Ext JS uses the Microloader to load application meta-data described in app.json. Sencha Cmd leverages app.json information to compile applications.


Application.js and app.js

When we generated MyApp, we created a class in Application.js, AND launched an instance of it in app.js. The Application Class in Application.js contains global settings for the application, such as the app's namespace, shared stores, etc.


Views

A View is is a subclass of Ext.Component and contains visual aspects for the app. If you open the starter app's Main.js under the "main" folder, you see...

This particular view defines a container with a border layout with a west and center region. These regions include a panel with a toolbar containing a button and a tab panel with a single tab.

The view does not include any application logic, which should be included in the ViewController. The controller config in the code above designates a ViewController for the view. When a ViewController is specified on a view in this manner, it then becomes a container for your event handlers and references. This gives the ViewController a one-to-one relationship with the components and events fired from the view. The viewModel config designates a ViewModel, which is a data provider for the component and its child views. The data contained in the ViewModel is typically used by adding bind configs to the components that want to present or edit this data.


Controllers

The starter app's generated ViewController MainController.js has...

The view, Main.js, has a function designation for the tbar button's handler. That handler is mapped to a function called onClickButton in this controller. The controller is ready to deal with that event with no special setup. All you need to do is define the onClickButton function since your controller has a one-to-one relationship with its view. Upon clicking the view's button, a Message box will be created. This message box contains its own function call with onConfirm, which is scoped to this same controller.

From instantiation to destruction, Ext.app.ViewController is tied to the component that referenced it. A second instance of the same view class would get its own ViewController instance. When these views are destroyed, their associated ViewController instance will be destroyed as well.


ViewModels

If you open MainModel.js file, you see...

The ViewModel class manages data objects, allowing views interested in this data to bind to it, and be notified of changes. The ViewModel, like ViewController, is owned by the view that references it. ViewModels link to a parent ViewModel, allowing child views to inherit the data from their parent ViewModel.


Models and Stores

Models and Stores are the information gateway: Data is sent, retrieved, organized, and modeled by these two classes.

Ext.data.Model represents persistable data. Models are used in conjunction with Stores. Data components can use Stores to populate grids, trees, and charts with data.

To add a model to the MyApp example, create file...

...with the following code...


Fields

Ext.data.Model describes records containing values or properties called "fields". The Model class can declare these fields using the fields config. In this case, the name is declared to be a string, and age is an integer. Declaring fields and their types is not required. If not includeed data will be automatically read and inserted into the data object. Define fields if the data needs validation, default values, or convert functions


Stores

Stores are client side record caches. Stores provide functions for sorting, filtering and querying their records. For example, define a store by creating file...

...with the following code...

Add the Store to Application.js to get a global instance of the store.


Next | Home