[ExtJS Study Notes] section 9 Introduction to the mvc and mvvm Framework Structure of Extjs5, extjsmvvm

[ExtJS Study Notes] section 9 Introduction to the mvc and mvvm Framework Structure of Extjs5, extjsmvvm

Address: http://blog.csdn.net/sushengmiyan/article/details/38537431

Author: sushengmiyan

--------------------------------------------------------------- Resource link -----------------------------------------------------------------------

Http://docs.sencha.com/extjs/5.0.0/application_architecture/application_architecture.html

This article only translates English into Chinese, making it easier for you to read it later.

Certificate ------------------------------------------------------------------------------------------------------------------------------------------------

Ext JS provides support for mvc and mvvm application frameworks, both of which focus on separating application code from business logic. Each method has its own advantages, depending on how the application module is separated.

The purpose of this guidance is to provide basic knowledge about components that constitute these frameworks.

What is the MVC framework? What is MVC?

In an MVC framework, most classes are either model or view or controller ). The user interacts with the view. The view displays data in the model ). These interactions are monitored by the controller. When necessary, the controller interacts with the response by updating the model and view.

Generally, neither model nor view knows each other, because the Controller is primarily responsible for direct update. In general, a controller in an application contains the majority of application logic. Ideally, views contain a little bit of business logic. A model is a user data interface that contains the business logic for managing changed data.

The goal of MVC is to clearly divide the class responsibilities in brother applications. Because each class has a clear responsibility, in a large environment, they are secretly decoupled. This makes the application easy to test box maintenance and enhances code reuse.

What is the mvvm framework? What is mvvm?

The biggest difference between mvc and mvvvm is that MVVM has an abstract view called viewmodel. The view model uses a technology called data binding to reconcile changes between the data of the model and the view presentation.

The result is that the model and framework do as much work as possible to minimize or eliminate application logic and operate the view directly.

Return user (returning users)

Ext js 5 introduced the support for the MVVM architecture and made improvements in mvc. We encourage you to explore and study these improvements. It is worth noting that we have made great efforts to continue to support the mvc of ext js 4.

Mvc and mvvm

To understand how to select the appropriate framework between your applications, we should start with defining these different manifestations:

(M: Model) Model: this is the data for your application. A group of classes (called "models") defines the data of fields (such as the user name and password fields of the user model ). You can use the data packet model to know how to present yourself and associate it with other models through the relationship. A model is usually used to store tables and other components that provide data. The model is also an ideal choice for any data logic you may need, such as verification and conversion.

(V: View) View: A View is a component of any type and is a visual representation. For example, grid, tree, and panel are both ideas.

(C: Controller): Controller is the management responsibility location for the view logic used to make your application work. This may require rendering views and routing instantiation models, and any other types of application logic.

(Vm: viewmodel): A view model is a data manager that manages and develops views. It allows binding of components of interest and notification of data changes.

These application architectures provide consistency between the structure and framework code. By convention, we recommend that you provide many important benefits:

Every application works in the same way, so you only need to learn it once.
It is easy to share code between applications.
You can use Sencha Cmd to create an optimized production version application.

Construct a simple APP

Before we start, let's build a sample application through Sencha Cmd. Run the following command from the command line:

sencha generate app -ext MyApp ./appcd appsencha app watch

Note: If you are not familiar with these commands, we recommend that you start from familiarity with sencha cmd: Click here to learn.

Application Preview

Let's take a look at the structure of the Application Generated by sencha cmd when we explain some knowledge about the organization of mvc mvvm and MVC + MV:

File directory structure

Ext js applications provide a unified directory structure for each app. We recommend that all classes be placed in the app folder, which contains subfolders to prevent your Models and stores from having view elements. View elements include view, viewcontrollers, and viewModels, which should be placed in a folder for ease of management. You can refer to the main folder in the View below.

Namespace)

The first line of code for each class is various addresses. An address (adress) is called a namespace. The namespace format is as follows:

<AppName>.<foldername>.<ClassAndFileName>

In our example program, 'myapp' is the name of the application, view is the folder name, main is the sub-folder, Main is the class, and is also a js file. With the above information, we can find the Main. js file in the following directory:

app/view/main/Main.js

If the file cannot be found, Extjs will throw an exception message until you solve the problem.

Application)

Let's start with index.html.

<!DOCTYPE HTML>Ext js uses Microloader to load application resources based on the description in the app. json file. This saves us the trouble of introducing other information in index.html. With app. json, the meta-data required by the application will be stored in a separate file location, and sencha cmd will effectively construct your application.
App. js
Before the Application we generated, we created a class (Application. js) and launched an instance of it (in app. js ). You can see the content of app. js as follows:


/* * This file is generated and updated by Sencha Cmd. You can edit this file as * needed for your application, but these edits will have to be merged by * Sencha Cmd when upgrading. */Ext.application({    name: 'MyApp',    extend: 'MyApp.Application',    autoCreateViewport: 'MyApp.view.main.Main'    //-------------------------------------------------------------------------    // Most customizations should be made to MyApp.Application. If you need to    // customize this file, doing so below this section reduces the likelihood    // of merge conflicts when upgrading to new versions of Sencha Cmd.    //-------------------------------------------------------------------------});
AutoCreateViewport is a new feature of Ext JS 5. By specifying the autoCreateViewport container class, you can use any class as your window. In the above example, we have determined MyApp. view. main. The main (a container class) is our window.



The autoCreateViewport configuration instructs the application to create a specified view and an additional window plug-in. This connects the view and the document body.
Application. js
Each Ext JS application starts an instance of the application class. This class aims to be tested by app. js launch-able and instantiable.
The following application. js is automatically generated by sencha cmd:

Ext.define('MyApp.Application', {    extend: 'Ext.app.Application',    name: 'MyApp',    stores: [        // TODO: add global/shared stores here    ],    launch: function () {        // TODO - Launch the application    }});
The apllicatin class contains the global variables you need, such as the application namespace and shared stores.


Views)
A view is just a Component. It is a subclass of Ext. Component. A view contains the visual aspects of all applications.
If you open main. js in the "Main" folder of the application, you should see the following code.

Ext.define('MyApp.view.main.Main', {    extend: 'Ext.container.Container',    xtype: 'app-main',    controller: 'main',    viewModel: {        type: 'main'    },    layout: {        type: 'border'    },    items: [{        xtype: 'panel',        bind: {            title: '{name}'        },        region: 'west',        html: '<ul>...</ul>',        width: 250,        split: true,        tbar: [{            text: 'Button',            handler: 'onClickButton'        }]    },{        region: 'center',        xtype: 'tabpanel',        items:[{            title: 'Tab 1',            html: '

Note that the view does not contain any application logic. The logic of all your views should be included in them, which will be discussed in the next section.

This specific view defines a container border with the layout of the western and central regions. These regions include a panel toolbar containing a button and a tab panel with only one tab. If you are not familiar with these concepts, refer to our Getting Started Guide.

See two interesting view controllers and view model configurations.

Controller config)
The Controller configuration allows you to specify ViewController for the view. When a view is specified on ViewController in this way, it becomes an event handler and reference container. This gives them a one-to-one relationship from view components and events. In the next section, we will further discuss controllers.
Viewmodel config)
The viewModel configuration view allows you to specify a view model. ViewModel is the data provider of this component and its sub-views. Generally, you can add the Data Binding configuration contained in the view model to the component to display or edit the data.
In the preceding view, you can see that the title of the panel on the left is bound to the view model. This means that the title will be filled with the "name" value of the data, which is managed by the ViewModel. If the ViewModel data changes, the title value is automatically updated. We will discuss the view model later in this article.
Controller (controllers)
Next, let's look at the controller. The automatically generated application. js looks like this:


Ext.define('MyApp.view.main.MainController', {    extend: 'Ext.app.ViewController',    requires: [        'Ext.MessageBox'    ],    alias: 'controller.main',    onClickButton: function () {        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);    },    onConfirm: function (choice) {        if (choice === 'yes') {            //        }    }});
If you review your view, Main. js, you will notice a handler that the function specifies the tbar button. The handler maps to an onClickButton controller. As you can see, the controller is ready to handle this event without special settings.



This makes it easy to add logic to your application. All you need to do is the onClickButton function custom View Controller has a one-to-one relationship.

When you click the View button, a message box is created. This message box contains its own function call onConfirm, with the same scope as the controller.

Viewcontroller aims:
Enable the connection view to use the "liseners" and "reference" configurations.
ViewController for automatic lifecycle management using views. From Instantiation to destruction of Ext. app. ViewController and its referenced components. ViewController of the same view class of the second instance will get its own instance. When these views are destroyed, their related ViewController instances will be destroyed.
Provides encapsulation for nested views.


View model viewmodels
Next, we will look at the Viewmodel code. If you open the MainModel. js file, you will see the following code:

Ext.define('MyApp.view.main.MainModel', {    extend: 'Ext.app.ViewModel',    alias: 'viewmodel.main',    data: {        name: 'MyApp'    }    //TODO - add data, formulas and/or methods to support your view});
A view model is a class that manages a data object. This type of data view can then be bound to it and change notifications. Like ViewModel ViewController, It is referenced. Because the view model is associated with a view, they can also be linked to a parent view model by the Component Hierarchy of the ancestor component. This allows the child view to only "inherit" The data parent view model.

From our point of view, we have created a link to the ViewModel Main. js ViewModel configuration. This link allows the setter bound to the configuration to declare the data view from viewModel to automatic setting. The MainModel. js is an example of data inline. That is to say, your data can be anything from anywhere. Any form of proxy (AJAX, Rest, etc.) that data may provide ).




Models and stores)
Model and storage form an application information portal. Most of these two types are used for data transmission, retrieval, organization, and modeling ".
Model (models)
The Ext. data Model indicates any type of sustainable data in the application. Each model has fields and functions that allow your application to "model" data. A model is the most commonly used combination. Store can use data binding components, such as grid trees and charts.
Our sample application does not currently contain a model. Let's add the following code:


Ext.define('MyApp.model.User', {    extend: 'Ext.data.Model',    fields: [        {name: 'name',  type: 'string'},        {name: 'age',   type: 'int'}    ]});
For example, you must first create a User. js file and place it in the model folder.
Field (fields)
The record described by Ext. data. Model contains values or attributes called "fields ". The model class can declare these fields using the "field" configuration. In this case, the "name" is declared as a string, and the age is an integer. For other field types, see the available API documentation.
Although there is a good reason to declare the field and its type, this is not necessary. If you do not include the field configuration, the data is automatically read and inserted to the data object. If you want to define field data requirements:
Verify
Default Value
Function Conversion
Let's set up a store for the two to work together.
Stores
Store is a client cache record (an instance of a model class). store provides the sorting function to filter and query records contained in.
This example application does not contain a store, but you don't have to worry about it. Simple definition of your storage and Allocation Model

Ext.define('MyApp.store.User', {    extend: 'Ext.data.Store',    model: 'MyApp.model.User',    data : [     {firstName: 'Seth',    age: '34'},     {firstName: 'Scott', age: '72'},     {firstName: 'Gary', age: '19'},     {firstName: 'Capybara', age: '208'}    ]});
Add User. js to the app/store directory.

Add the configuration in Apllication. js as follows:

stores: [    'User'],
In this example, the storage directly contains data. In most real-world cases, you are required to use a proxy to collect data models or stores. The proxy allows data transmission between the data provider and the application.

You can read