sencha cmd是用来创建,构建ExtJS 程序的工具。
准备
您需要安装好sencha cmd命令行工具。
创建应用程序
sencha cmd创建ExtJS的程序框架
//方法一:创建ExtJS 6 项目
// 打开命令行窗口,window上即cmd.exe
sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app
/path/to/ext6 是ext6 路径
MyApp 是项目名
/path/to/my-app 复制到哪里去
sencha -sdk G:\file\ext-6.2.0 generate app demo1 G:\file\senchacmd-64bit\object
如果没有指定sdk,则需要进入sdk目录后才能创建成功
//方法二:创建ExtJS 6 项目
//进入sdk目录
cd /path/to/ext6
sencha generate app MyApp /path/to/my-app
创建的应用程序目录文件如下
.sencha/ # Sencha-specific files (primarily configuration)
app/ # Application-specific content
sencha.cfg # Application configuration file for Sencha Cmd
Boot.js # Private, low-level dynamic loader for JS and CSS
Microloader.js # Loads app based on app.json content
build-impl.xml # Standard application build script
*-impl.xml # Implementations of various build phases
defaults.properties # Default values and docs for build properties
ext.properties # Build property values specific to Ext JS
*.defaults.properties # Build properties by environment (e.g. "testing")
plugin.xml # Application-level plugin for Sencha Cmd
codegen.json # Data for merging generated code during upgrade
workspace/ # Workspace-specific content (see below)
sencha.cfg # Workspace configuration file for Sencha Cmd
plugin.xml # Workspace-level plugin for Sencha Cmd
ext/ # Ext JS SDK副本
cmd/ # Framework-specific content for Sencha Cmd
sencha.cfg # Framework configuration file for Sencha Cmd
classic/ # Packages related to the Classic Toolkit
classic/ # Ext JS Classic Toolkit package
theme-neptune/ # Classic Toolkit Theme Package for Neptune
theme-triton/ # Classic Toolkit Theme Package for Triton
...
modern/ # Packages related to the Modern Toolkit
modern/ # Ext JS Modern Toolkit package
theme-neptune/ # Modern Toolkit Theme Package for Neptune
theme-triton/ # Modern Toolkit Theme Package for Triton
...
packages/ # Framework supplied packages
charts/ # Charts package
ux/ # Contents of "Ext.ux" namespace
...
index.html # 应用程序入口
app.json # Application manifest
app.js # Application入口类
app/ # MVC模式的应用程序代码,你的代码大多写在这个目录下
model/ # 模型
store/ # store
view/ # 视图
main/ # Folder for the classes implementing the Main View
Main.js # The Main View
MainModel.js # The `Ext.app.ViewModel`
MainController.js # The `Ext.app.ViewController`
Application.js # The `Ext.app.Application` class
packages/ # Sencha Cmd packages
workspace.json # 工作空间描述
build/ # 构建输出的目录
构建程序
使用generate指令创建的应用程序大小达到100多M,构建指令会将页面,JS代码,主题构建到build目录下,移除sdk中不必要的文件并进行整合,让最终的包达到5~6M左右。
cd path/to/my-app
sencha app build
发布程序
使用如下指令,即可发布ExtJS 6程序,并在浏览器上查看
cd path/to/my-app
sencha app watch
Ctrl + C即可关闭服务
在浏览器中输入http://localhost:1841/,即可查看
refresh
当修改了样式,主题,本地化配置后,你需要通过refresh来更新程序。
例如修改本地化配置,打开app.json,
在requires处,将本地化配置改为中文
"requires":{
"font-awesome",
"ext-locale" //新添加
},
"locale":“zh_CN” //新添加
使用如下指令,才能完成应用程序国际化配置的更新
cd /path/to/my-app
sencha app refresh
生成代码
生成模型
cd /path/to/MyApp
sencha generate model User id:int,name,email
//结果是在 app/model目录下产生了User.js,其中定义了User模型类,包含三个属性:id,name,email
生成视图
//生成
cd /path/to/MyApp
sencha generate view foo.Thing
上面指令将生成如下文件
app/
view/
foo/ #
Thing.js # View
ThingModel.js # Ext.app.ViewModel
ThingController.js #Ext.app.ViewController
你还可以为视图指定父类
cp /path/to/MyApp
sencha generate view -base Ext.tab.Panel foo.Thing
生成controller
cd /path/to/MyApp
sencha generate controller Central
查看帮助
sencha help
sencha help generate
sencha help refresh
sencha help app