为什么要用Sencha Cmd呢
首先是它有编译脚本的功能,将零散的应用程序脚本打包成一个下载包,而且可以吧没有使用到的组件清理出去。使用生成功能后,则可将所有应用程序内的脚本打包为一个文件发布,这对于部署和用户体验都是由极大好处的。
其次是它由编译主题,这是Sencha Cmd体现得最突出一点。一直以来,ExtJs最突出得问题就是主题得缺乏,而主题得修改也不方便。在ExtJs6中引用了新的SASS编译器——Fashion,不再需要使用Compass和Sass了。
接下来需要安装一下Sencha Cmd了(自行百度一下吧,这里就不说这么安装了)
安装成功之后再命令窗口输入sencha
出现这些就说明你安装成功啦~~~
4.1 创建第一个应用程序
首先切换到你要创建程序得文件夹下面
然后输入以下命令
命令运行成功之后,可在提示窗口看见如下代码
创建成功之后用Sencha Cmd的Web服务器功能测试一下
输入如下的命令:
在命令中,port选项的作用是定义访问端口,这里将使用8000作为端口;map选项用来指定Web的访问目录
4.1.1 目录结构
.sencha 文件夹:在该文件夹下有app和workspace两个文件夹,主要包含一些生成应用程序所需的配置文件。一般情况下,不需要修改.sencha文件夹下的任何文件。
app文件夹:这是后续开发将要使用到的文件夹。在该文件夹下有model、store、view三个文件夹,分别用来存放应用程序的控制器、模型、存储和视图文件。在app文件夹下,有一个Application.js文件,该文件是用来加载视图、控制器和存储的,在后续开发中随着视图、控制器和存储的添加,需要不断的修改该文件。在app\view文件夹下,已经生成了Viewport.js和Main.js两个主界面视图,后续的开发将从修改这两个文件开始。
ext文件夹:Ext JS 的框架文件所在的文件夹。
overrides文件夹:当需要重写框架的类时,可存放在这里。
package文件夹:用来放置打包后的文件,可存放在这里。
resources文件夹:存放应用程序的资源文件。
sass文件夹:存放自定义的主题或样式文件。
app.js:应用程序的启动文件。
app.json:应用程序的配置文件。
bootstrap.js:样式引导文件。代替直接加载ext-all.css或其他编译好的样式文件。该文件会在生成应用程序时被修改。
bootstrap.json:用来保存应用程序中脚本和样式文件的路径,为bootstrap.js脚本和样式文件提供加载地址。
build.xml:生成应用程序时需要使用到的配置文件。
index.html :应用程序启动时需要使用到的页面文件。
workspace.json:一个大的项目可能时由几个小项目组成的,而这些小项目会有一些共享代码,这时候就需要用到工作空间来解决共享代码的问题,本文件就是用来定义共享空间的。