[ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来

本文地址： http://blog.csdn.net/sushengmiyan/article/details/38313537
本文作者：sushengmiyan
-------------------------------------------------------------资源链接-----------------------------------------------------------------------
翻译来源  Sencha Cmd官方站点： 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

一键生成你的应用程序代码：

------------------------------------------------------------

  我们的出发点就是使用命令来产生一个应用程序。运行下面命令：
  sencha generate app -ext MyApp E:\senchaworkspace\MyApp

能够看到例如以下运行结果

以上命令会从官网下载试用版本号的ext代码到你本地，假设你已经购买正版代码，那么须要使用下一节（-sdk命令来生成你的应用程序）在你的硬盘目录下能够看到：

这表明自己主动生成了你的程序框架。

须要注意的是。生成的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,这个命令须要你在你的应用程序目录下运行哦。能够看到我的运行步骤例如以下：

须要注意不能使用-sdk命令了，使用会出现故障哦

运行完毕之后能够看到添加了build文件夹。下方就是包括了js代码 sass还有主题的文件夹。

Sencha 的网络服务容器：

----------------------------------------------------

使用 sencha web start命令来开启你的服务。服务同意你将本地应用程序当做网络服务。

这个命令将1841port制定为当前的訪问port，假设想停止服务就运行例如以下命令： sencha web stop或者ctrl+c来结束服务

想訪问你的服务，仅仅须要在浏览器中运行例如以下路径：

http://localhost:1841 

当我们訪问的时候，能够看到默认生成的网页例如以下：

假设你不想使用1841port，你能够在运行的时候制定port号码：sencha -port 8080 web start

扩展你的应用程序

使用 sencha generate 命令帮你你高速的创建一个mvc的组件包像controllers和models 

运行下面命令sencha help generate你能够看到有例如以下的扩展信息：

重要：为了运行命令，你须要在当前应用程序的路径下运行才干够。

添加一个新的models

--------------------------------------------

使用sencha generate model 命令就能够。

如图 

这样就创建了一个User的Model包括三个属性

添加一个新的Controllers

-----------------------------------------------------

类似上述命令，运行 sencha generate controller Central

添加一个view

------------------------------

也是一样运行 sencha generate view SomeView

客户化定制构造程序

-----------------------------------------

如今又多种多样的配置选项能够使用在 ”.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"
}