本文地址: [http://blog.csdn.net/sushengmiyan/article/details/38313537](http://blog.csdn.net/sushengmiyan/article/details/38313537)
本文作者:sushengmiyan
-------------------------------------------------------------资源链接-----------------------------------------------------------------------
翻译来源 Sencha Cmd官方网站: [http://www.sencha.com/products/extjs/up-and-running/cmd-getting-started](http://www.sencha.com/products/extjs/up-and-running/cmd-getting-started)
------------------------------------------------------------------------------------------------------------------------------------------------
### **带着Ext JS 5来使用sencha cmd**
-------------------------------------------------------------------
这个指导通过处理使用 sencha cmd的sencha generate app命令来创建应用程序,本文是以允许一个应用程序来结束的
处理更新一个存在的应用程序来体验Sencha cmd是在本章结束的时候介绍的,首先理解什么是"ideal"和“default”是很重要的,在默认的结构和已经存在的应用程序中驱动更新是有很大区别的。
### **学习基础:**
------------------
如果想阅读以下内容,那么你需要先了解上节内容:[http://blog.csdn.net/sushengmiyan/article/details/38295575](http://blog.csdn.net/sushengmiyan/article/details/38295575)
### **一键生成你的应用程序代码:**
------------------------------------------------------------
我们的出发点就是使用命令来产生一个应用程序,执行以下命令:
sencha generate app -ext MyApp E:\senchaworkspace\MyApp
可以看到如下执行结果
![](image/d41d8cd98f00b204e9800998ecf8427e.jpg)
![](https://box.kancloud.cn/2016-02-03_56b214e6a9afa.jpg)
以上命令会从官网下载试用版本的ext代码到你本地,如果你已经购买正版代码,那么需要使用下一节(-sdk命令来生成你的应用程序)在你的硬盘文件夹下可以看到:
![](image/d41d8cd98f00b204e9800998ecf8427e.jpg)
![](https://box.kancloud.cn/2016-02-03_56b214e6b7a41.jpg)
这表明自动生成了你的程序框架。
需要注意的是,生成的EXTjs 是商业体验版本,如果你购买了,那么你需要下载ext js的zip包,并且使用-SDK命令来制定SDK的路径,这样,就不会去默认下载SDK而是按照你本地的文件来生成了。
命令如下: sencha -sdk /这里是你的sdk路径/ generate app MyApp 你的App的路径。如 sencha -sdk c:sencha5.0.0 generate app OASystem d:\oasys
执行完成之后可以看到如下的文件夹路径:
~~~
.sencha/ # Sencha-specific files (for example, configuration)
app/ # Application-specific content
Boot.js # Private, low-level dynamic loader for JS and CSS
Microloader.js # Loads app based on app.json content
sencha.cfg # Application configuration file for Sencha Cmd
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 property values by env (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/ # A copy of the Ext JS SDK
cmd/ # Framework-specific content for Sencha Cmd
sencha.cfg # Framework configuration file for Sencha Cmd
packages/ # Framework supplied packages
ext-theme-classic/ # Ext JS Theme Package for Classic
ext-theme-neptune/ # Ext JS Theme Package for Neptune
... # Other theme and locale packages
src/ # The Ext JS source
...
index.html # The entry point to your application
app.json # Application manifest
app.js # Launches the Application class
app/ # Your application's source code in MVC structure
model/ # Folder for application model classes
store/ # Folder for application stores
view/ # Folder for application view classes
main/ # Folder for the classes implementing
Main.js # The Main View
MainModel.js # The `Ext.app.ViewModel` for the Main View
MainController.js # The `Ext.app.ViewController` for the Main View
Application.js # The `Ext.app.Application` class
packages/ # Sencha Cmd packages
build/ # The folder where build output is placed
~~~
这个路径和上方文件夹截图是没有区别的都是一样的。
### **构造你的应用程序:**
----------------------------------------
只需要执行以下命令就可以构造你的应用程序打包了
sencha app build,这个命令需要你在你的应用程序文件夹下执行哦。可以看到我的执行过程如下:
![](https://box.kancloud.cn/2016-02-03_56b214e6d5fe6.jpg)
需要注意不能使用-sdk命令了,使用会出现问题哦
执行完成之后可以看到增加了build目录,下方就是包含了js代码 sass还有主题的文件夹。
### **Sencha 的网络服务容器:**
----------------------------------------------------
使用 sencha web start命令来开启你的服务。服务允许你将本地应用程序当做网络服务。
![](image/d41d8cd98f00b204e9800998ecf8427e.jpg)
![](https://box.kancloud.cn/2016-02-03_56b214e70f7b5.jpg)
这个命令将1841端口制定为当前的访问端口,如果想停止服务就执行如下命令: sencha web stop或者ctrl+c来结束服务
想访问你的服务,只需要在浏览器中执行如下路径:
http://localhost:1841
当我们访问的时候,可以看到默认生成的网页如下:
如果你不想使用1841端口,你可以在执行的时候制定端口号码:sencha -port 8080 web start
扩展你的应用程序
使用 sencha generate 命令帮你你快速的创建一个mvc的组件包像controllers和models
执行以下命令sencha help generate你可以看到有如下的扩展信息:
重要:为了执行命令,你需要在当前应用程序的路径下执行才可以。
### **增加一个新的models**
--------------------------------------------
使用sencha generate model 命令就可以。
如图
![](image/d41d8cd98f00b204e9800998ecf8427e.jpg)
![](https://box.kancloud.cn/2016-02-03_56b214e748782.jpg)
这样就创建了一个User的Model包含三个属性
### **增加一个新的Controllers**
-----------------------------------------------------
类似上述命令,执行 sencha generate controller Central
![](https://box.kancloud.cn/2016-02-03_56b214e75732c.jpg)
### **增加一个view**
------------------------------
也是一样执行 sencha generate view SomeView
![](image/d41d8cd98f00b204e9800998ecf8427e.jpg)
![](https://box.kancloud.cn/2016-02-03_56b214e767ae5.jpg)
### 客户化定制构造程序
-----------------------------------------
现在又多种多样的配置选项可以使用在 ”.sencha/app/sencha.cfg“文件夹下,在只有一张页面的情况下,可以忽略”.sencha/workspace“配置文件夹
### **classpath类路径**
----------------------------------
sencha app build 命令制定去哪里找到你的应用程序的代码全部依赖于app.classpath配置,它是在”.sencha/app/sencha.cfg“文件夹下的。默认的数值是
~~~
app.classpath=${app.dir}/app,${app.dir}/app.js
~~~
### **更高层次的阅读:**
-----------------------------------
想了解更多的关于sencha cmd的命令处理,你额可以参考 Inside the app build process
更新你的应用程序
使用 sencha app upgrade[新的路径]
对于已经存在的应用程序来说,可能默认的不是index.html这时候需要你在app.json中制定:
~~~
{
...
"indexHtmlPath": "index.php"
}
~~~
- 前言
- [EXtJS5学习笔记]第一节 Sencha Cmd 学习笔记 简介 Sencha Cmd是什么
- [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
- [ExtJS5学习笔记]第三节 sencha cmd学习笔记 生成应用程序构建的内部细节
- [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
- [ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介
- [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding
- [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
- [ExtJS5学习笔记]第十二节 Extjs5开发遇到的问题列表记录
- [ExtJS5学习笔记]第十三节 Extjs5的Ext.each方法学习
- [ExtJS5学习笔记]第十四节 Extjs5中data数据源store和datapanel学习
- [ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪
- [ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
- [ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar
- [ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
- [ExtJS5学习笔记]第二十二节 Extjs5中使用beforeLabelTpl配置给标签增加必填选项星号标志
- [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置
- [ExtJS5学习笔记]第二十四节 Extjs5中表格gridpanel或者表单数据后台传输remoteFilter设置
- [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
- [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件
- [ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word => debugger;)
- [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
- [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
- [ExtJS5学习笔记]第三十一节 sencha extjs 5使用cmd生成的工程部署到tomcat服务器
- [ExtJS5学习笔记]第三十二节 sencha extjs 5与struts2的ajax交互配置
- [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结