https://blog.csdn.net/n0_no/article/details/52979996
ExtJS 快速入门 - sencha cmd 常用命令
Sencha Cmd的简介
详细命令:
一、sencha generate: 自动生成项目或者代码
1、sencha generate app 项目名称 生成路径 :生成一个新的extjs项目 。(试用版本的ext代码到你本地[当你没有下载extjs的时候])
已经下载好extjs 并解压 在D:\myApp(D:\ext-6.2.0)
sencha -sdk /这里是你的sdk路径/ generate app myApp 你的App的路径。
例如: sencha -sdk D:\ext-6.2.0 generate app myApp D:\myapp
2、sencha generate model model名称 所有字段,
例如:sencha generate model User name:string,password:string,age:int
3、sencha generate controller users:生成一个名为users的controller
(controller文件夹在ext5中已经过时,controller的定义合并到view中,所以该命令在ext5中也过时,只适用于ext4的版本)
二、sencha app build:构建项目(默认构建成生产环境项目),或者叫发布项目
1、sencha app build production:构建为生产环境项目 (sencha app build 命令执行了基本的校验并且调用 apache ant 去构造)
2、sencha app build testing:构建为测试环境项目,所有的JS代码以及CSS文件都会被绑定在一起,但是并不会对文件进行压缩,以便调试。
3、sencha app build package:创建一个独立的,可再分配的工程环境,通常只是在本地的文件系统下运行,并不需要放到服务器中去。
4、sencha app build native:把我们的程序打包成本地应用程序,准备在真机上做测试。(打包成移动应用的可安装程序
5、sencha app refresh:可在添加类、删除类或更改类名后运行。它会通过Ext.Loader来更新bootstrap文件。
6、sencha ant sass:该命令会根据Sass源代码重新生成CSS文件。它可在任何scss文件改变后运行。在Ext JS 4.1种,还可以使用compass watch通过检测文件系统的改变来更新Sass。
下载安装:
安装后在cmd控制台输入:sencha -version
OPTIONS
* --debug, -d - Sets log level to higher verbosity 日志
* --plain, -p - enables plain logging output (no highlighting) 不高亮
* --quiet, -q - Sets log level to warnings and errors only 是否出现日志
* --sdk-path, -s - sets the path to the target sdk 指定 sdk 目录所在
CATEGORIES
* compile - Compile sources to produce concatenated output and metadata 编译
* generate - Generate code like models and controllers or raw templates 代码生成
* theme - Builds a set of theme images from a given html page 主题
* app - Perform various application build processes 构建程序
COMMANDS
* ant - Invoke Ant with helpful properties back to Sencha Cmd Java Ant 打包
* build - Builds a project from a JSB3 file. 根据 JSB3 文件构建项目
* config - Loads a config file or sets a configuration property 加载配置文件
* help - Get help on using Sencha Cmd 显示帮助信息
下载 url:Sencha cmd 下载请点我
备注:
ruby尽量用最新版本吧。
Sencha Cmd 提供了一系列功能强大的节约时间的功能,结合Sencha Ext JS 和Sencha Touch框架协同工作。
Sencha Cmd 提供了如下几个能力:
1.代码生成工具:代码生成工具生成整个应用程序并且扩展生成mvc的组件框架,如,使用sencha generate app 命令,可以自动帮你生成一个完成的应用程序目录框架。
2.JS编译:框架意识,JavaScript 编译器了解Sencha的语义语法,并且从你源代码构建的时候产生较少的足迹。编译器通过Sencha框架减少加载应用程序的时间来优化高层次的语义。
3.网络服务:提供了轻量级的网络服务,如,使用sencha web start 可以启动网络服务。
4.本地包装:以一流的移动应用程序访问设备给移动应用程序并且可以方便的分布到移动商店。
5.包装管理系统:方便集成的由管理系统(像Ext js 的主题)
6.构建脚本. 通过在应用程序中增加“before”和"after"给应用程序增加一些额外的设置点让客户可以定制适合自己需求的脚本。
7.转换工具:强大的代码选择器转换你项目中需要最终构建需要的代码,决定页面和局部共享代码的高级别选择集像你需要的那样构造。
8.工作空间管理:过不同的应用程序共享框架工作,包河自定义的代码透。
9.图像提取:转换CSS3的特性(比如边界半径和线性梯度)
10.灵活的配置系统: 在一台机器上允许命令行操作程序或者在工作空间级别或者整个工作空间。
11.日记功能:强大的日志功能帮助你理解整个内部的命令行工作,排除故障。
12.三方控件: Sencha cmd 包含了Compass sass 和ant 。
13.代码生成的钩子:可以指定到一个页面或者在工作控件分享所有页面,例如检查daunting的惯例或者产生新的模型。
文件/文件夹名的作用:
build:文件夹下有一个sdk.jsb3文件,这个文件用于eclipse中spket插件,可以实现ExtJs的代码提示功能;
builds:压缩后的ExtJS代码,体积更小,更快;
docs:开发文档;
examples:官方演示示例;
locale:多国语言资源文件;
pkgs:ExtJS各部分功能的打包文件;
resource:ExtJS所需要的CSS与图片文件;
src:未压缩的源代码目录;
bootstarp.js:ExtJS库引导文件,可通过参数自动切换ext-all.js与ext-all-debug.js;
ext-all.js:ExtJS核心库,需要引用;
ext-all-debug.js:ExtJS核心库的调试版,调试时使用。
注:EXTJS文件的区别:
ext-all.js:包含所有的EXTJS框架文件,已经混淆
ext-all-debug.js:包含所有的EXTJS框架文件,没有混淆
ext-all-dev.js:包含所有的EXTJS框架文件,没有混淆,且包含调试信息
ext.js:仅包含能让EXTJS运行的最小集合,已经混淆
ext-debug.js:仅包含能让EXTJS运行的最小集合,没有混淆
ext-dev.js:仅包含能让EXTJS运行的最小集合,没有混淆,且包含调试信息
bootstrap.js:自动加载ext-all.js或者ext-all-debug.js,在以下情况下会加载ext-all-debug.js
1.当前主机名是本地
2.当前主机是使用IPV4地址
3.Current protocol is a file
4.其他情况下自动加载ext-all.js
我们在进行Ext开发的时候只需将ext-all.js、ext-all-debug.js、bootstarp.js和locale文件夹里的ext-lang-zh_CN.js以及resource整个文件夹拷入项目的ExtJs4(名字随便起)文件夹里。
ExtJs6.0 目录结构介绍和使用说明
程序入口图:
1. index.html中加入 <scripttype=text/javascriptsrc=“bootstrap.js></script>来加载bootstrap.js文件。
2.bootstrap.js中,根据需求加载了app.js和bootstrap.json文件。
3.app.js文件继承自’cfcmms.Application’,根据命名空间和类的自动加载机制,加载了父类Application.js;再根据属性:requires: [‘cfcmms.view.main.Main’],加载了view/main/Main.js文件。
4.Main.js中根据requires中的字符串数组,加载了MainController.js、MainModel.js和List.js。
在自动生成的示例中使用了MVVM架构,相关类的关系图如下:
sencha cmd生成的应用程序的结构:
文件目录结构
Ext JS应用程序遵循统一的目录结构,每个应用程序都是相同的。
layout、all Store、Model、ViewModel和ViewController类都放在app文件夹下
(model文件夹存放Models,store文件夹存放Stores,view文件夹存放ViewModels/Controllers),
最佳实践是使用类似命名结构的规则将逻辑组ViewControllers和ViewModels一起存放在app/view的子文件夹下。
命名空间(Namespace)
每一个类的第一行代码是各种地址,地址(adress)叫做命名空间,命名空间的格式如下:
<AppName>.<foldername>.<ClassAndFileName>