跟我extjs5(03--在项目过程中加载文件)

上一节中用sencha工具自己主动创建了一个项目。而且能够在浏览器中查看。

如今我们来看看js类载入过程。

例如以下图所看到的：
1､首先：浏览器中输入 localhost:1841 ，调用 index.html;
    
          app    
          
在这里面仅仅引入了一个文件：bootstrap.js。这是一个奇妙的文件，他依据配置文件bootstrap.json来设置extjs的类的调用路径、引入css，最后再依据配置文件里的信息，载入app.js。

这个文件仅仅要知道这些功能即可了，要了解详细的内部实现，能够去搜索一下相关文章。

2､app.js文件的说明

Ext.application({    name: 'app',//应用的名称app    extend: 'app.Application',       //继承自app.Application,这个文件是 app/Application.js        autoCreateViewport: 'app.view.main.Main'  //自己主动创建的Viewport的类名,文件在 app/view/main/Main.js});

上面的类中会依据类载入的设置信息，自己主动为类 app.Application载入文件 /app/Application.js,相同也为app.view.main.Main类找到js文件并载入。

3､Application.js文件

Ext.define('app.Application', {			extend : 'Ext.app.Application',			name : 'app',			views : [], // ＭＶＣ用到的view			controllers : ['Root'			// MVC控制器的名称，会自己主动到 /app/controller下去载入同名的js文件			// 对于Root,会去自己主动载入 /app/Controller/Root.js 这个文件			],			stores : [],			launch : function() {				// 须要运行的语句能够加在此处			}		});

4、Main.js 文件

Ext.define('app.view.main.Main', {    extend: 'Ext.container.Container',    xtype: 'app-main',        controller: 'main',	    	//MVVM架构的控制器的名称，会在当前路径中依据‘Main’ + Controller 来确定文件名称    	//这个我没找到其它不论什么能够自己主动载入MainController.js的依据，仅仅能作上面的推断了    viewModel: {        type: 'main'    	//MVVM架构的viewModel的类型，会在当前路径中依据‘Main’ + Model 来确定文件名称    },    layout: {        type: 'border'			//系统的主页面的布局    },    items: [{        xtype: 'panel',	        bind: {            title: '{name}'        },        region: 'west',		//左边面板        html: '
      
       This area is commonly used for navigation, for example, using a "tree" component.
      
',        width: 250,        split: true,        tbar: [{            text: 'Button',            handler: 'onClickButton'        }]    },{        region: 'center',		//中间面版        xtype: 'tabpanel',        items:[{            title: 'Tab 1',            html: 'Content appropriate for the current navigation.
'        }]    }]});

上面的类是继承自Container的一个容器类，这个类使用了extjs5的mvvm的新特性，

controller: 'main',	    	//MVVM架构的控制器的名称，会在当前路径中依据‘Main’ + Controller 来确定文件名称    	//这个我没找到其它不论什么能够自己主动载入MainController.js的依据。仅仅能作上面的推断了    viewModel: {        type: 'main'    	//MVVM架构的viewModel的类型，会在当前路径中依据‘Main’ + Model 来确定文件名称    },

上面的属性controller表示当前Main类的控制器为"main",这个类里没有引用控制器的语句。因此控制器的类名可能是有其默认的载入规则。应该是在当前路径中载入“Main”+"Controller.js"，这个文件作为控制器。

viewModel属性定义了ＶＭ的类型，其载入类的规则和上面控制器是一样的。

因为此类是作为一个 autoCreateViewport 属性被载入，载入完毕后会马上生成一个实例，并渲染，就是我们看到的网页。

extjs中类的动态载入机制非常灵活，这里也不能所有讲到，有不明确的能够查找相关资料。在用sencha cmd 对js 进行编译以后，会将所有的js ,书面和包含用户手册extjs5 sdk用类都在同一个文件。当它目前只发行了一大js文件。