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

本文作者: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命令来开启你的服务。服务允许你将本地应用程序当做网络服务。

这个命令将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 命令就可以。

如图 

这样就创建了一个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"
}
时间: 2024-11-01 23:36:18

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

[EXtJS5学习笔记]第一节 Sencha Cmd 学习笔记 简介 Sencha Cmd是什么

本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:    http://www.sencha.com/products/extjs/up-and-running/cmd-introduction J

[ExtJS5学习笔记]第三节 sencha cmd学习笔记 生成应用程序构建的内部细节

本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:http://docs.sencha.com/extjs/5.0.0/cmd/advanced_cmd/cmd_build.html -------

斯坦福深度学习课程第二弹:词向量内部和外部任务评价

像追美剧一样追课程! 大数据文摘已获斯坦福大学深度学习课程CS224d翻译授权, 重磅启动"斯坦福深度学习课程CS224d"的翻译工程, 所有译文将会免费发布,计划每周发布1篇. 期待你的加入,加入要求见文末 报名请点击文末"阅读原文". 大数据文摘作品,转载需授权 翻译:熊杰 王昱森   调整校对:寒小阳 龙心尘 特别鸣谢:曾宪超 大数据文摘"机器学习"专栏介绍 本文为大数据文摘机器专栏推出的[数据科学/机器学习]学习分享项目启动篇,我们将以S

[你必须知道的.NET]第二十回:学习方法论

说在,开篇之前 本文,源自我回答刚毕业朋友关于.NET学习疑惑的回复邮件. 本文,其实早计划在<你必须知道的.NET>写作之初的后记部分,但是因为个中原因未能如愿,算是补上本书的遗憾之一. 本文,作为[<你必须知道的.NET>]系列的第20回,预示着这个系列将开始新的征程,算是[你必须知道的.NET]2.0的开始. 本文,作为一个非技术篇章,加塞儿到<你必须知道的.NET>队伍中,我想至少因为回答了以下几个必须知道的非技术问题:.NET应该学习什么? .NET应该如何学

简明 TensorFlow 教程 — 第二部分:混合学习

本文讲的是简明 TensorFlow 教程 - 第二部分:混合学习, 快速上手世界上最流行的深度学习框架. 确保你已经阅读了第一部分 在本文中,我们将演示一个宽 N 深度网络,它使用广泛的线性模型与前馈网络同时训练,以证明它比一些传统的机器学习技术能提供精度更高的预测结果.下面我们将使用混合学习方法预测泰坦尼克号乘客的生存概率. 混合学习技术已被 Google 应用在 Play 商店中提供应用推荐.Youtube 也在使用类似的混合学习技术来推荐视频. 本文的代码可以在这里找到. 广泛深度网络

人工智能时代的工作、学习和生活---《人工智能》阅读笔记

自从"罗辑思维"栏目从优酷网站搬到得到APP并且变为每天几分钟的节目之后,我就很少收听它了.某天,我打开得到APP,并且点开了"罗辑思维"的节目清单,发现有一期的标题包含了"人工智能"这几个字.出于好奇,我收听了这期几分钟的节目.在节目中,罗胖推荐了李开复老师的新书<人工智能>.一般说来,只要是李开复老师的书,我都会毫不犹豫地买下来,这次也不例外. 在拿到新书之后,我几乎一口气将它读完了,觉得本书虽然涉及人工智能技术方面的知识比较少,

第二节--PHP5 的对象模型 -- Classes and Objects in PHP5 [2]

object|php5|对象 | = 本文为Haohappy读<<Core PHP Programming>> | = 中Classes and Objects一章的笔记 | = 翻译为主+个人心得 | = 为避免可能发生的不必要的麻烦请勿转载,谢谢 | = 欢迎批评指正,希望和所有PHP爱好者共同进步! +-------------------------------------------------------------------------------+*/ 第二节--

第二节--PHP5 的对象模型_php基础

/* +-------------------------------------------------------------------------------+ | = 本文为Haohappy读<<Core PHP Programming>>  | = 中Classes and Objects一章的笔记  | = 翻译为主+个人心得  | = 为避免可能发生的不必要的麻烦请勿转载,谢谢  | = 欢迎批评指正,希望和所有PHP爱好者共同进步!  | = PHP5研究中心: 

如何使用 MS CRM 2011 中的目标(Goal) -- 第二节 自定义Goal Metric

上一节我们介绍了如何使用系统自带的一个范例目标,Q3 目標 (範例).这一节我们来学习一下如何创建自己的Goal Metric和Rollup Field. 我们在这节中将创建一个目标,我们的目标是2012年第三季度用户Erik van Boxtel的qualified lead达到10个. 首先我们创建一个Goal Metric,我们命名它为qualified leads.Metric Type为count. 然后我们再为这个Goal Metric创建一个新的Rollup Field: 在这个R