Ext JS 5 (III)

I mentioned the localization file problem above, and found it in the Ext JS 5 package. It didn't contain the localization package. I don't expect localization to be considered yet. In Sencha Touch, there is no localization package, but it is unrealistic to make Ext JS not contain the localization package. If you want to insert a local package in the current mode, this is a big problem. To load the localization package, the best position should be after completing Ext JS initialization, before loading the application, but according to the current mode, one is to modify the Bootstrap by yourself. json file. First, the local package is loaded after the application is loaded. If you modify the Bootstrap. the json file is not quite displayed, because it is a headache to adjust the idx of the file to be loaded. If idx is not adjusted, add the localization package directly at the end, it is no different from simply initializing the app and then loading the local file. Check whether there is a problem after the application is loaded after initialization. This requires verification. Currently, it is difficult to draw conclusions. This problem may not be solved well in later versions. This issue should be discussed only when the official version is available.

Let's take a look at app. js. The Code is as follows:

Ext.application({    name: 'TestExt5',    extend: 'TestExt5.Application',        autoCreateViewport: 'TestExt5.view.main.Main'});

The Code shows that the biggest difference between autoCreateViewport and 4 is that autoCreateViewport is no longer true or false, but the class name is directly specified. I flipped through the app \ view directory, and there were no four Viewport. js files. What happened?

Open Ext. app. application source file. After reading it, we found that there is an additional class Ext. container. plugin. viewport, that is, Viewport is now only a container plug-in and is no longer an independent container class. In this way, you can avoid confusion in use, and no longer need to worry about using Viewport in the container or panel.

Go to the app directory, open the applicaiton. js file, and you will see that this is 4, no difference.

Next, open the class file TestExt5.view. main. Main and you will see the following definitions:

    controller: 'main',    viewModel: {        type: 'main'    },

This is the New View Controller and view model of Ext JS 5.

The following code defines the view model:

Ext.define('TestExt5.view.main.MainModel', {    extend: 'Ext.app.ViewModel',    alias: 'viewmodel.main',    data: {        name: 'TestExt5'    }    //TODO - add data, formulas and/or methods to support your view});

In the Code, only one data name is defined and the value is TestExt5. What is the use of this value? Switch back to TestExt5.view. main. Main and you will see the following code:

        xtype: 'panel',        bind: {            title: '{name}'        },        region: 'west',

From the code, we can see that the data name is bound to the title of the Panel, that is, the title of the Panel will display TestExt5, as shown in the figure in the article.

Let's take a look at the View Controller code:

Ext.define('TestExt5.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') {            //        }    }});

Two methods are defined in the Code. onConfirm is the callback function of Ext. Msg. confirm in the onClickButton method.

Switch back to TestExt5.view. main. Main. You can see that the buttons in the panel are bound with the onClickButton method. That is to say, when you click the button, the onClickButton method of the View Controller is directly executed. This method is very good, which can reduce the amount of code. When using the 4 MVC structure, the biggest headache is to define a bunch of references in the Controller and write a bunch of delimiters to bind events to the component. Now, you only need to write the method in the View Controller and bind the method directly to the view. This is awesome!

In the app \ controller directory, there are two files, Main. js and root. js. Both files have simple definitions and do not have specific code to execute. As expected, in the development of Step 5, Main. js is mainly used for data transmission between views. Root. js is mainly used to define routes according to annotations.

At the end of the article, we will generate an application. Open the Command Prompt window and enter the application directory. Here is C: \ TestExt5, and then run the following command:

sencha app build

After compilation is complete, you can see the following files and directories in the C: \ TestExt5 \ build \ production \ TestExt5 directory:

When you open index.html, you will find a large section of compressed Javascript code. This Code carefully reads the code after compressing the bootstrap. js file. However, the following code is displayed in the first line of the compressed code:

Ext.manifest="app"

That is to say, bootstrap is not going to be loaded this time. json file, but app. json file, that is, app. it's time for the json file to take a good look at the app. comment in the json file. Otherwise, it is very likely that an error will occur when you rush to modify the file.

Now, we have a preliminary discussion about Ext JS 5. In the future, we will have the opportunity to study new functions of Ext JS 5.