ExtJS6的中sencha cmd中自动创建案例项目代码分析
在之前的博文中,我们按照sencha cmd的指点,在自己win7虚拟机上创建了一个案例项目,相当于创建了一个固定格式的文档目录结构,然后里面自动创建了一系列js代码。
这是使用sencha cmd自动创建的文件夹目录结构:
然后我们将整个项目,copy到win7服务器上部署好的apache服务器上:
运行一下,果然可以使用:
让我们来看看,这些自动创建的文件目录和js文件是如何工作的:
整个extjs项目的入口文件是app.js文件
之所以这么说估计ext就这么定义的,看看蒋锋的博客,下图,也是这么说的
如上图所示的目录结构,是eclipse中的视角,目录结构略有不同。
原因是,他首先在eclipse中创建一个D web project,然后将sencha创建的目录结构拷贝到了该project的WebContent目录中。意识是一样的,好了,我们将目录结构的话题转回来,继续说ext中各个文件的关系:
由上面的几个图片可以看到被显示的项目首页,实际上体现了ExtJS6.x中一些重要的概念比如,MVVM。
做几个实验吧
1.仅注释掉controller行:
结果就是new.js中的items中的项目的双击事件,无法触发了
只有“事件”没有被触发,但是数据都显示出来了
2.仅注释viewModel行
结果就是,什么都没有显示。这出乎意料,因为这与我们最初的认知很不一样。我最开始以为被显示的数据,一部分在new.js的items里面,另一部分在viewModel行对应的NewModel.js文件中。假如仅注释viewModel行,new.js中的代表左侧菜单栏中的数据,user乱七八糟的应该是被显示的。但是,结果是,全都不显示。下面是new.js中items中的代码:
3.不注释viewModel行,仅注释viewModel中对应文件中的数据
4.不使用alias,直接使用全限定名
5.修改app.js中主界面文件的名称
下面连同文件名一起修改
6.仅修改alias不修改文件名和全限定名
可以正常运行
7.修改alias和全限定名,不修改文件名
无法正常运行
8.alias、全限定名和文件名全都修改
可见,文件名和全限定名必须同时修改保持一致,才能正常找到文件。
下面我们看看List.js文件
如果在主界面中注释掉Home菜单项的xtype内容
继续看看List.js文件所代表的内容
直接看代码
/**
* This view is an example list of people.
*/
Ext.define('SimpleCMS.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
requires: [
'SimpleCMS.store.Personnel'
],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
],
listeners: {
select: 'onItemSelected'
}
});
在此解释一下xtype是什么意思,xtype的意思就是“外号” 或者 "别名"
和类型没有任何关系,就是一个外号而已。
from https://yq.aliyun.com/articles/272335
ExtJS6的中sencha cmd中自动创建案例项目代码分析的更多相关文章
- Extjs6(一)——用sencha cmd建立一个ExtJs小项目
本文基于ext-6.0.0 一.用sencha cmd建立一个ExtJs小项目 首先,需要一个命令行工具.进入extjs所在目录. 然后,输入:sencha -sdk [ExtJs6.0文件夹地址] ...
- 学习笔记-使用cmd命令行创建nodejs项目
使用cmd命令行创建nodejs项目 1)在DOS下cd 进入到你想要创建项目的路径. 2)mkdir sing (创建一个sing文件夹) 3)cd sing 4) npm init (初始化工程 ...
- 【翻译】Sencha Cmd中脚本压缩方法之比较
概述 为什么要修改默认设置 YUI压缩 Google Closure编译器 UglifyJS 案例研究Ext JS 6示例应用程序 注意事项 自定义JS压缩 小结 概述 这么多年来,Web开发人员都被 ...
- 【IDE_IntelliJ IDEA】IDEA中使用Junit插件自动创建测试用例到test目录
第一步 从插件资源库中搜索JunitGenerator V2.0插件并安装 第二步 配置测试用例的生成目录 1.打开File->Settings 2.搜索junit,找到JUnit Genera ...
- platform型设备在/dev目录下自动创建设备节点的分析【转】
转自:http://blog.csdn.net/rockrockwu/article/details/7357648 系统启动过程中platform设备.驱动注册完毕,为什么在/dev目录下就自动创建 ...
- 🏆【Alibaba中间件技术系列】「RocketMQ技术专题」Broker服务端自动创建topic的原理分析和问题要点指南
前提背景 使用RocketMQ进行发消息时,一般我们是必须要指定topic,此外topic必须要提前建立,但是topic的创建(自动或者手动方式)的设置有一个开关autoCreateTopicEnab ...
- 用cmd命令行创建vue项目模板
1.进入cmd命令行 输入存放项目的位置 2.通过vue create 项目名称 创建项目 3.选择Manually select features 4.通过空格选中第1.2.5.6.7.去掉8 4. ...
- android 中在CMD中查看sqlite
今天第一次学习Sqlite,在代码中执行了sql,但是不知道在上面地方才能直观的查看sqlite中的数据,下面是查看资料后的找到的查看方法: 通过上述可以从cmd进入数据库查看原文地址:http:// ...
- 使用Gradle自动创建Java项目结构
D:\N3verL4nd\Desktop\java>tree 卷 本地磁盘 的文件夹 PATH 列表 卷序列号为 00000200 0006:08B0 D:. ├─.gradle │ ├─3.4 ...
随机推荐
- Yarn NodeManager restart
一.介绍默认Yarn NodeManager重启后会断开所有当前正在运行的container的状态,这意味着重启后需要重新启动container进程,该特性的作用就是把NM的状态临时保存到本地,重启后 ...
- 高性能高并发网络库:StateThreads
StateThreads是一个C的网络程序开发库,提供了编写高性能.高并发.高可读性的网络程序的开发库,轻量级网络应用框架 共也就3000行C代码 网络程序(Internet Application) ...
- 后台测试常需要的htm样式
<form name="form" method="post" action="#"> <input type=" ...
- Ubuntu之命令壁纸
- 【转】DWM 窗体玻璃效果实现
我一直盼望着 Windows 新版本的发布.令人感兴趣的事情莫过于浏览 MSDN® 和 SDK 文档,查找一些可以利用和依赖的最新创新,然后让朋友和同事以及您的老板(如果幸运的话)大开眼界.Windo ...
- 【转】BMP图像文件格式
5.1 BMP图像文件格式 BMP图像文件格式是游戏中常用的图像资源文件格式,BMP图像文件起源早,程序员对BMP都比较熟悉,再加上BMP格式简单,读取和写入非常容易实现,所以无论Windows的还 ...
- C++ Primer学习笔记(三) C++中函数是一种类型!!!
C++中函数是一种类型!C++中函数是一种类型!C++中函数是一种类型! 函数名就是变量!函数名就是变量!函数名就是变量! (---20160618最新消息,函数名不是变量名...囧) (---201 ...
- JAVA 多线程机制(一)
PS:又开始忙叨JAVA了..前一阵子搞定了HTML+CSS,要开始写实验室的界面了,真没劲...博客到时候再更新吧! 先更新JAVA的吧... 多线程(一) 主要内容 1.JAVA中的线程 2.用T ...
- php微信开发 -- 两种运营模式及服务器配置
微信的两种运营模式 编辑模式:使用微信公众平台提供的功能 开发者模式:通过腾讯的api接口调用相应程序进行二次开发 编辑模式 应用场景: l 不具备开发能力的运营者 l 主要是进行品牌宣传.新闻媒体. ...
- php -- 实现linux关机、重启功能
有时候,我们自己可以DIY一个控制面板实现linux的关机重启功能.众所周知,linux是一个基于文件的操作系统,所以要实现系统的关机重启功能必须满足以下两点 一.知道命令的绝对路径 在linux下操 ...