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

最新推荐文章于 2018-11-23 08:51:39 发布

b10l07

最新推荐文章于 2018-11-23 08:51:39 发布

阅读量96

点赞数

文章标签：测试 javascript json ViewUI

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

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

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

例如以下图所看到的：
1､首先：浏览器中输入 localhost:1841 ，调用 index.html;
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">

    <title>app</title>

    
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>
在这里面仅仅引入了一个文件：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: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
        width: 250,
        split: true,
        tbar: [{
            text: 'Button',
            handler: 'onClickButton'
        }]
    },{
        region: 'center',		//中间面版
        xtype: 'tabpanel',
        items:[{
            title: 'Tab 1',
            html: '<h2>Content appropriate for the current navigation.</h2>'
        }]
    }]
});

上面的类是继承自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文件。

b10l07

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟我extjs5(03--在项目过程中加载文件)

跟我extjs5(03--在项目过程中加载文件)上一节中用sencha工具自己主动创建了一个项目。而且能够在浏览器中查看。如今我们来看看js类载入过程。例如以下图所看到的：1､首先：浏览器中输入 localhost:1841 ，调用 index.html;&lt;!DOCTYPE HTML&gt;&lt;html...
复制链接

扫一扫