EXTJS5 (Simple description of the 04--MVVM feature)

Let's look at the relationship of the MVVM schema in the automatically generated code. Main is a visual control, Maincontroller is the control class for this control, and Mainmodel is the model class for this control.

In the above picture, the left side is the code in Main.js, and the code on the right is maincontroller.js and mainmodel.js, and you can see that the event bindings and property value bindings in MVVM are used. The red part of a button labeled "button" handler (that is, the click) event is bound to the function "OnClickButton" in Maincontroller.js. The blue section indicates that the title property of the Panel is bound to the name value of the Mainmodel property data, and if you want to modify the value of the panel, you can just modify the data.name in the Mainmodel.

Let's take a look at the specific display on the webpage:

Let's make one of the simplest changes to change the title value of the panel to "modified title". Modify Maincontroller.js, add a statement

1Ext.define (' App.view.main.MainController ', {2Extend: ' Ext.app.ViewController ',3 4Requires: [' Ext.messagebox '],5 6Alias: ' Controller.main ',7 8OnClickButton:function() {9Ext.Msg.confirm (' Confirm ', ' is you sure? ', ' onconfirm ', This);Ten     }, One  AOnconfirm:function(choice) { -         if(Choice = = = ' Yes ') { -             //Add the following statement the              This. GetView (). Getviewmodel (). Set (' Name ', "modified title"); -         } -     } -});

Added a statement

1 this. GetView (). Getviewmodel (). Set (' Name ', ' modified title ');  

The amount of information in this statement is also very large, respectively, to illustrate:

• This represents the current class, which is the instance of Maincontroller.
• This.getview () represents the view class instance under the control of the current controller.
• This.getview (). Getviewmodel () represents the model for which the view instance is bound.
• Set (' Name ', ' modified title '), change the value of the model to name, and the panel's title will be updated automatically when modified.

The following results are performed:

We performed the first modification of the program correctly.

For a person who wants to learn good extjs, official examples and APIs are essential tools. For example, in the above statement, I want to get the view under the current controller, I also go to the API above the methods to find the corresponding function, in order to determine whether there is no and function name.

EXTJS5 (Simple description of the 04--MVVM feature)