Learn extjs5 with me (Brief description of 04--MVVM features)

Learn extjs5 with me (Brief description of 04--MVVM features)

Next, let's take a look at the relationship between the MVVM architecture in the automatically generated code. Main is a visual control, MainController is the control class of this control, and MainModel is the model class of this control.


In the above image, the code in Main. js is on the left, and the code in MainController. js and MainModel. js is on the right. You can see that event binding and attribute value binding in MVVM are used. In the red section, the handler (that is, click) event of the Button "Button" is bound to the OnClickButton function in MainController. js. The blue part indicates that the title attribute of the panel is bound to the name value of the MainModel attribute data. If you want to modify the value of the Panel, you only need to modify the data. name in the MainModel. Let's take a look at the specific display on the webpage:


The following is a simple modification. Change the title value of the panel to "modified title ". Modify MainController. js and add a statement

Ext. define ('app. view. main. mainController ', {extend: 'ext. app. viewController ', requires: ['ext. messagebox'], alias: 'controller. main', onClickButton: function () {Ext. msg. confirm ('Confirm', 'Are you sure? ', 'Onfirm', this) ;}, onConfirm: function (choice) {if (choice = 'yes') {// Add the following statement this. getView (). getViewModel (). set ('name', "modified title ");}}});

Added a statement

This. getView (). getViewModel (). set ('name', "modified title ");

This statement has a large amount of information, respectively, to explain the following:

This indicates the current class, that is, the MainController instance. This. getView () indicates the View class instance under the control of the current controller. This. getView (). getViewModel () indicates the Model bound to the view instance. Set ('name', 'Modified title'). Modify the Value name of the Model. After modification, the title of the panel is automatically updated.

The execution result is as follows: we can correctly execute The first modification of the program. For a person who wants to learn extjs well, 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 methods in the api to find the corresponding function to determine whether or not there is a function name or not.