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

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

我们的出发点就是使用命令来产生一个应用程序,执行以下命令:
  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 本地的extjs的地址 generate app OASystem d:\oasys

执行完成之后可以看到如下的文件夹路径:

  1. .sencha/                        # Sencha-specific files (for example, configuration)
  2. app/                        # Application-specific content
  3. Boot.js                 # Private, low-level dynamic loader for JS and CSS
  4. Microloader.js          # Loads app based on app.json content
  5. sencha.cfg              # Application configuration file for Sencha Cmd
  6. build-impl.xml          # Standard application build script
  7. *-impl.xml              # Implementations of various build phases
  8. defaults.properties     # Default values and docs for build properties
  9. ext.properties          # Build property values specific to Ext JS
  10. *.defaults.properties   # Build property values by env (e.g. "testing")
  11. plugin.xml              # Application-level plugin for Sencha Cmd
  12. codegen.json            # Data for merging generated code during upgrade
  13. workspace/                  # Workspace-specific content (see below)
  14. sencha.cfg              # Workspace configuration file for Sencha Cmd
  15. plugin.xml              # Workspace-level plugin for Sencha Cmd
  16. ext/                            # A copy of the Ext JS SDK
  17. cmd/                        # Framework-specific content for Sencha Cmd
  18. sencha.cfg              # Framework configuration file for Sencha Cmd
  19. packages/                   # Framework supplied packages
  20. ext-theme-classic/      # Ext JS Theme Package for Classic
  21. ext-theme-neptune/      # Ext JS Theme Package for Neptune
  22. ...                     # Other theme and locale packages
  23. src/                        # The Ext JS source
  24. ...
  25. index.html                      # The entry point to your application
  26. app.json                        # Application manifest
  27. app.js                          # Launches the Application class
  28. app/                            # Your application's source code in MVC structure
  29. model/                      # Folder for application model classes
  30. store/                      # Folder for application stores
  31. view/                       # Folder for application view classes
  32. main/                   # Folder for the classes implementing
  33. Main.js             # The Main View
  34. MainModel.js        # The `Ext.app.ViewModel` for the Main View
  35. MainController.js   # The `Ext.app.ViewController` for the Main View
  36. Application.js              # The `Ext.app.Application` class
  37. packages/                       # Sencha Cmd packages
  38. 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 一键生成你的应用程序代码的更多相关文章

  1. 1、Sencha cmd学习笔记(一) 使你的sencha cmd跑起来

    带着Ext JS 5来使用sencha cmd -------------------------------------------------------------------  这个指导通过处 ...

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

    本文地址: http://blog.csdn.net/sushengmiyan/article/details/38313537 本文作者:sushengmiyan ----------------- ...

  3. 【翻译】Sencha Cmd中脚本压缩方法之比较

    概述 为什么要修改默认设置 YUI压缩 Google Closure编译器 UglifyJS 案例研究Ext JS 6示例应用程序 注意事项 自定义JS压缩 小结 概述 这么多年来,Web开发人员都被 ...

  4. Ext JS 6和Sencha CMD 6 快速入门

    Ext JS 6和Sencha CMD 6的入门很简单.一个命令,即可生成一个功能完整的“通用”应用程序,可以运行在本地服务器上. 这个“通用”的应用程序包含一组核心的stores,模型(models ...

  5. 在线制作一键生成微信小程序实现原理之需求分析

    随着微信小程序接口不断的放开,小程序在今年或许是明年必将成为商家的一个标配,这个标配的标准就是要开发周期短,费用低,功能实用.只有这样才能让线下的广大商家快速接入.现在也有好多公司开发出了一键生成快速 ...

  6. 【vsCode】识别.vue/一键生成.vue模板文件

    1.安装插件Vetur 结果 ---> .vue代码识别彩标 2.配置.vue文件模板,以便快速一键生成格式化 2.1新建代码片段 File->Preferences->User S ...

  7. VSCode 初次写vue项目并一键生成.vue模版

    VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...

  8. 利用代码生成工具生成基于ABP框架的代码

    在前面随笔,我介绍了整个ABP优化过框架的分层模型,包括尽量简化整个ABP框架的各个层的关系,以及纳入一些基类的辅助处理,使得我们对应业务分层类或者接口尽可能减少代码,并具有生产环境所需要的基类接口, ...

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

    本文地址: http://blog.csdn.net/sushengmiyan/article/details/38316829本文作者:sushengmiyan------------------- ...

随机推荐

  1. Think different

    Here's to the crazy ones.The misfits.The rebels.The troublemakers.The round pegs in the square holes ...

  2. 我的vim配置文件

    强烈拥护开源精神,高举开源大旗,今天我就分享下我自己结合网上还有自己实际使用配的vimrc,可以给各位参考下,不要见笑,具体说明我在rc里写的也很详细,可以具体看下,也希望可以借这个机会能多认识认识几 ...

  3. C#常用类库

    1.0 TimeSpan  TimeSpan passTime = (TimeSpan)(DateTime.Now - curUser.refuseTime); if (passTime.Days * ...

  4. 判断JS对象是否拥有某属性

    两种方式,但稍有区别 1.in 运算符  

  5. C#系统缓存全解析(转载)

    C#系统缓存全解析 对各种缓存的应用场景和方法做了很详尽的解读,这里推荐一下 转载地址:http://blog.csdn.net/wyxhd2008/article/details/8076105

  6. 用js解析经json序列化后的C#的DateTime类型数据

    格式化日期(网上到处是),把下面的代码添加到jQuery.js文件中 //格式化日期 Date.prototype.format = function(format) { /* * eg:format ...

  7. EC笔记,第一部分:1.视C++为一个语言联邦

    C++可看作由以下四种次语言组合而成1.C语言    高效,内置数据类型,数组,区块,语句,指针,预处理器,没有重载.异常.模板2.类    构造,析构,封装,继承,多态,迟绑定3.模板    模板元 ...

  8. jquery 集合操作

    修剪字符串 $.trim(value) 功能: 删除传入的字符串开头和结尾的空白 [空白]匹配js正则中的\s,也就是包括空白,换行,回车,制表符,换页以及Unicode字符\u00A0 返回值: 返 ...

  9. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  10. Ampersand.js - 模块化的 JS 应用程序开发框架

    Ampersand.js 是一个高度模块化,松耦合,用于构建先进的 JavaScript 应用程序的框架.通过良好定义的方法,结合了一系列微小的 CommonJS 模块.条理清晰,没有多余的冗余代码. ...