Extjs5 with Me (03--loading parts during the project)

Extjs5 with Me (03--loading parts during the project)

The previous section used the Sencha tool to create a project on its own initiative. And can be viewed in the browser.

Now let's look at the JS class loading process.

For example, as seen in:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvamzvaw==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/center ">

1. First: Enter localhost:1841 in the browser, call index.html;

<! DOCTYPE html>
  

  In this case, only one file was introduced: Bootstrap.js. This is a wonderful file, he based on the configuration file Bootstrap.json to set the ExtJS class of the call path, introduced CSS, and finally based on the information in the configuration file, loaded into App.js.
  

  
This file only needs to know these functions can be, to understand the detailed internal implementation, to be able to search for related articles.

  

  


 

description of the 2?app.js file

Ext.application ({    name: ' app ',//app name app    extend: ' App. Application ',       //inherit from app. Application, this file is App/application.js        autocreateviewport: ' App.view.main.Main '  ///self-created viewport class name, file in App/view/main/main.js});

In the class above, you will take the initiative to the class app based on the settings information loaded by the class. Application loading file/app/application.js, same also for App.view.main.Main class find JS file and load.

3? Application.js file

Ext.define (' app. Application ', {extend: ' Ext.app.Application ', Name: ' App ', Views: [],//MVC uses viewcontrollers: [' Root '//MVC controller name, will own the master Move to/app/controller down to load into the same name of the JS file//For Root, will go to their own initiative to load/app/controller/root.js this file],stores: [],launch:function () {// The statement that needs to be run can be added here}});

4. main.js file

Ext.define (' App.view.main.Main ', {extend: ' Ext.container.Container ', xtype: ' App-main ', controller: ' Main ', The name of the controller for the MVVM schema, which determines the file name in the current path based on ' Main ' + controller//This I didn't find anything else. No matter what can be done on their own initiative to load the basis of maincontroller.js, can only make the above inference VIEWMO Del: {type: ' main '//mvvm the ViewModel of the schema, which determines the file name in the current path according to ' main ' + Model}, layout: {type: ' Borde  R '//layout of the main page of the system}, items: [{xtype: ' Panel ', bind: {title: ' {name} '}, Region: ' West ',//left panel HTML: ' <ul><li>this area was commonly used for navigation, for example, using a ' tree ' co            Mponent.</li></ul> ', width:250, Split:true, Tbar: [{text: ' Button ',            Handler: ' OnClickButton '}]},{region: ' Center ',//middle panel xtype: ' TabPanel ', items:[{    Title: ' Tab 1 ', HTML: ' 
  
The class above is a container class that inherits from container, which uses the new features of the EXTJS5 MVVM,

  

  
    Controller: ' main ', the name of the    director of the//MVVM schema, will determine the file name in the current path based on ' main ' + controller    I didn't find anything else that could be the basis on which to voluntarily load maincontroller.js. Can only be inferred from the above    ViewModel: {type        : ' main '    //MVVM schema of the ViewModel type, will be in the current path according to ' main ' + Model to determine the file name    },
  

  

  
 

The above property controller indicates that the current main class is "main", and there is no statement referencing the controller in this class. Therefore, the class name of the controller may have its default load rule. Should be loaded in the current path "Main" + "Controller.js", this file as a controller.

The ViewModel property defines the type of VM, and the rules that load the class are the same as the above controller.

Because this class is loaded as a Autocreateviewport property, an instance is generated immediately after loading and rendered, which is the page we see.

The dynamic loading mechanism for classes in ExtJS is very flexible and cannot be discussed here, and there are ambiguous sources to find relevant information. After compiling with Sencha cmd for JS, all JS, written and user manual EXTJS5 SDK classes are used in the same file. When it currently only released a large JS file.

Extjs5 with Me (03--loading parts during the project)