准备工作
- 下载安装 Sencha Cmd
- 下载 ExtJS SDK 解压到本地（以下例子中extjs sdk解压在D:\sencha\ext-6.0.0）
建立工作空间
-
执行以下 dos 命令生成工作空间
> sencha -sdk D:\sencha\ext-6.0.0 generate workspace D:\sencha\workspace -
可以在 workspace\.sencha\sencha.cfg 文件中添加全局变量，例如增加 app.url 属性：
app.url=http://localhost/test-web/
创建公共包
-
执行以下dos 命令
> cd D:\sencha\workspace > sencha generate package commonWidget -
修改 commonWidget 包下的package.json
{ ... "namespace":"CommonWidget", //修改命名空间首字母为大写 "framework":"ext", //指定框架为extjs "toolkit":"classic", //指定为传统PC风格 "requires": ["charts"] //必要时添加其它ext基础包的依赖 ... }
至此，已建好 commonWidget 包，可以在它的 src 下直接添加公共的 extjs 类，在后续创建的 ext app 中直接依赖使用 commonWidget 的内容。
打包命令:
sencha package build
创建App
-
执行以下 dos 命令，创建** Test** 的 App
> cd D:\sencha\workspace > sencha -sdk D:\sencha\ext-6.0.0 generate app -classic Test test -
修改 Test 下的 app.json
{ ... "env": "${build.environment}", "serviceUrl":"${app.url}", //定义Ext下的全局变量，可直接引用workspace中添加的属性配置 "theme": "theme-test", //可在此处指定app所需的主题 "requires":[ "font-awesome", //字体图标 "commonWidget", //上方创建的公共包 "ext-locale", //国际化 ... ] ... }
常用的编译app sencha命令：
sencha ant clean//清除编译制品
sencha app build development//构建为开发环境项目
sencha app build production//构建为生成环境项目
sencha app refresh//可在添加类、删除类或更改类名后运行。它会通过Ext.Loader来更新bootstrap文件，方便开发模式的调试
sencha ant sass//该命令会根据Sass源代码重新生成CSS文件。它可在任何scss文件改变后运行。
创建 App 的自定义主题包和文件结构
-
执行以下 dos 命令，创建 theme-test 主题皮肤
> cd D:\sencha\workspace\test > sencha generate theme theme-test 文件结构说明
“package.json” -这是包属性文件，它告诉Sencha Cmd关于这个包的名字、版本和依赖关系（其他需要的包）
“sass/” -这个目录包含所有样式源文件，源文件分为4个主要部分：
- “sass/var/” ：变量。
- “sass/src/” ：规则和UI混入调用定义在“sass/var/”的变量。
- “sass/etc/” ：包含额外的函数和功能。
- “sass/example” ：包含当文件使用时用于生成图像切片样本成分（别管它的名字，这个文件夹是Sencha Cmd使用，不能删除）
“resources/” -包含主题需要的图像和静态资源
“overrides/” -包含任何JavaScript重写Ext JS组件类，这些组件需要的主题
