extjs5(项目中文件的加载过程)
- 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 来确定文件名
- },
extjs5(项目中文件的加载过程)的更多相关文章
- 2、手把手教你Extjs5(二)项目中文件的加载过程
上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; ...
- ELF文件的加载过程(load_elf_binary函数详解)--Linux进程的管理与调度(十三)
加载和动态链接 从编译/链接和运行的角度看,应用程序和库程序的连接有两种方式. 一种是固定的.静态的连接,就是把需要用到的库函数的目标代码(二进制)代码从程序库中抽取出来,链接进应用软件的目标映像中: ...
- Spring Framework框架解析(1)- 从图书馆示例来看xml文件的加载过程
引言 这个系列是我阅读Spring源码后的一个总结,会从Spring Framework框架的整体结构进行分析,不会先入为主的讲解IOC或者AOP的原理,如果读者有使用Spring的经验再好不过.鉴于 ...
- Spring 容器中bean的加载过程
bean 的加载过程大致可以分为以下几个步骤: 1.获取配置的资源文件 2.对获取到的xml资源文件进行解析 3.获取包装资源 4.解析处理包装之后的资源 5.加载 提取bean 并进行注册(添加到b ...
- Ogre中Mesh的加载过程详述
转自:http://blog.csdn.net/yanonsoftware/article/details/1031891 如果新开始写一个3D渲染引擎,Mesh应该是一个很好的切入点.当一个看似简单 ...
- QML中文件的加载(三种方法)
在这里小小总结一下QML文件中如何加载QML文件与JavaScript文件. 1.QML文件中加载JavaScript文件 语法: import <ModuleIdentifier> &l ...
- abp web.mvc项目中的菜单加载机制
abp中的菜单加载机制 在abp中菜单的定义与我们传统写的框架不一样,它是在编写代码的时候配置,而我们一般写的通用权限管理系统中,是后期在后台界面中添加的.这一点有很大不同.abp关于菜单的定义及管理 ...
- web项目中配置文件的加载顺序
当一个项目启动时,首先是web.xml: 这里面的配置: 为什么要在web.xml中配置struts的过滤器? 因为一个web项目运行的时需要加载的,或者默认的部分配置都会在web.xml中配置,中间 ...
- Java web 项目 web.xml 配置文件加载过程
转载自:http://blog.csdn.net/luoliehe/article/details/46884757#comments WEB加载web.xml初始化过程: 在启动Web项目时,容器( ...
随机推荐
- Typecho反序列化导致前台 getshell 漏洞复现
Typecho反序列化导致前台 getshell 漏洞复现 漏洞描述: Typecho是一款快速建博客的程序,外观简洁,应用广泛.这次的漏洞通过install.php安装程序页面的反序列化函数,造成了 ...
- 下面哪些是无效的Java标识?为什么?
下面哪些是无效的Java标识?为什么? a.Factorial b.anExtremelyLongIdebtifierifyouAsKMe c.2ndLevel d.level2 e.MAX_SIZE ...
- vue WepApp 音乐App实战以及各个知识点
1.组件初始化(scoped 貌似属于局域css样式) 2.组件使用三部曲(当然第三步可以<MHeader></MHeader> 也不报错) 3. 配置 路由 ①.在route ...
- macbook install mysql
安装Homebrew,详细步骤参见Homebrew官网. brew doctor确认brew在正常工作. brew update更新包. brew install mysql 安装mysql.log如 ...
- np.nonzero()函数用法
返回数组中不为0的元素的下标. 数组中元素可为布尔.整型和浮点型,返回值为元祖 一.一维数组 1.数组元素为布尔类型 a=np.array([True,False,True,False]) b=np. ...
- wxpy: 用 Python 玩微信【转】
转自:https://wxpy.readthedocs.io/zh/latest/index.html 微信机器人 / 可能是最优雅的微信个人号 API wxpy 在 itchat 的基础上,通过大量 ...
- vc++高级班之多线程篇[7]---线程间的同步机制②
//示例代码: CStringArray g_ArrString; UINT __cdecl ThreadProc(LPVOID lpParameter) { int startIdx = (int ...
- new-delete-malloc-free关系总结
new-delete-malloc-free关系总结 写在前面的话 这个系列的笔记总结是根据网上的两篇基础拓展而来的 C++经典面试题(最全,面中率最高) C++面试集锦( 面试被问到的问题 ) 面试 ...
- safarai - loading.close() 无效问题
代码环境: vue + elenment 问题描述: 上传文件时,显示loading动画:上传成功后,隐藏loading动画.window 下常用的浏览正常,safari 下的chrome浏览器(目前 ...
- 使用Fiddler进行手机端抓包
1.手机和电脑在同一局域网 2.在电脑上查看ip地址 3.如果是需要抓取https,则需要在浏览器中输入http://xxx.xxx.x.xxx:8888(第二部查到的ip地址 + Fiddler 的 ...