跟我一起学extjs5(03--项目中文件的加载过程)


跟我一起学extjs5(03--项目中文件的加载过程)


上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看。现在我们来看看js类加载过程。如下图所示:





1、首先:浏览器中输入 localhost:1841 ,调用 index.html;

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">

    <title>app</title>

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <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 : [], // MVC用到的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属性定义了VM的类型,其加载类的规则和上面控制器是一样的。

由于此类是作为一个 autoCreateViewport 属性被加载,加载完成后会立即生成一个实例,并渲染,就是我们看到的网页。

extjs中类的动态加载机制很灵活,这里也不能全部讲到,有不明白的可以查找相关资料。在用sencha cmd 对js 进行编译以后,会将所有的js ,包括用户手工写的和extjs5 sdk中用到的类全部放在一个文件中,发布的时候就只有一个大的js文件。


发布了162 篇原创文章 · 获赞 606 · 访问量 87万+
展开阅读全文

Extjs6 bootstrap.js为什么不能加载extjs框架

11-24

``` <!DOCTYPE HTML> <html manifest=""> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>app</title> <script type="text/javascript"> var Ext = Ext || {}; // Ext namespace won't be defined yet... // This function is called by the Microloader after it has performed basic // device detection. The results are provided in the "tags" object. You can // use these tags here or even add custom tags. These can be used by platform // filters in your manifest or by platformConfig expressions in your app. // Ext.beforeLoad = function (tags) { var s = location.search, // the query string (ex "?foo=1&bar") profile; // For testing look for "?classic" or "?modern" in the URL to override // device detection default. if (s.match(/\bclassic\b/)) { profile = 'classic'; } else if (s.match(/\bmodern\b/)) { profile = 'modern'; } else { profile = tags.desktop ? 'classic' : 'modern'; //profile = tags.phone ? 'modern' : 'classic'; } Ext.manifest = profile; // this name must match a build profile name // This function is called once the manifest is available but before // any data is pulled from it. // //return function (manifest) { // peek at / modify the manifest object //}; }; </script> <!--The line below must be kept intact for Sencha Cmd to build your application --> <script id="microloader" data-app="e34bf098-cabc-49d5-a390-bd9e72585c15" type="text/javascript" src="bootstrap.js"></script> <script type="text/javascript"> function helloworld(){ Ext.Msg.alert("EXTJS"); } </script> </head> <body onload="helloworld()"> </body> </html> ``` 为什么 Ext.Msg.alert("EXTJS"); 不能执行?需要导入 ``` <script src="ext/ext-bootstrap.js" ></script> ``` 才能执行! 这个代码是Sencha Cmd6生成的ExtJs6.0 的index.html 为什么我加入的ext代码就不行 他可以调用其他ext代码展现首页 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览