ExtJS5.0的加载过程
来源:互联网 发布:东研网络 同花顺 编辑:程序博客网 时间:2024/05/22 01:22
文章转自http://www.itxxz.com/a/gaoji/2014/1219/461.html
再次感谢原作者的分享,为了方便查看转载过来了
这里我们借鉴蒋锋老师的一篇文章,感觉更加通俗易懂
- 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>
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 属性被加载,加载完成后会立即生成一个实例,并渲染,就是我们看到的网页。
0 0
- ExtJS5.0的加载过程
- 跟我一起学extjs5(03--项目中文件的加载过程)
- Extjs5.0(4):开始正式的编写Extjs5.0代码
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- 关于extjs5.0下的mixins
- ExtJS5.0的mvvm分层思想
- Extjs5.1 柱状图动态加载
- Extjs5.0(1):简单暴力地窥视Extjs5.0的真容
- EXTJS5的学习记录之TreePanel树的本地加载与异步加载
- Extjs5.0新特性
- extjs5.0入门教程
- ExtJS5.1学习笔记7——表单的提交和加载
- Extjs5.1(10):Form加载复杂Json
- extjs5 入门 遇到的bug
- Extjs5需要引入的文件
- Extjs5.0(8):Panel组件
- 类的加载过程
- webkit的加载过程
- [LeetCode][Java] First Missing Positive
- java中的绑定、前期绑定、后期绑定三者的概念
- 初步了解EF
- PhoneGap开发对策:如何通过苹果审核
- ListView的Item中子控件抢占焦点的两种解决办法
- ExtJS5.0的加载过程
- Android 同步代码块,synchronized加锁
- MYSQL学习笔记(六)之子查询
- PCIe及USB传输速度小结
- iOS应用主流UI架构实现
- 写在前面(一些感想及纪念今天正式开始写博客)
- cell 动画效果之一
- UI基础之----触摸事件
- iOS 支付宝 集成