使用sencha cmd 一键生成你的应用程序代码
一键生成你的应用程序代码:
------------------------------------------------------------
我们的出发点就是使用命令来产生一个应用程序,执行以下命令:
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
执行完成之后可以看到如下的文件夹路径:
- .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 一键生成你的应用程序代码的更多相关文章
- 1、Sencha cmd学习笔记(一) 使你的sencha cmd跑起来
带着Ext JS 5来使用sencha cmd ------------------------------------------------------------------- 这个指导通过处 ...
- [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38313537 本文作者:sushengmiyan ----------------- ...
- 【翻译】Sencha Cmd中脚本压缩方法之比较
概述 为什么要修改默认设置 YUI压缩 Google Closure编译器 UglifyJS 案例研究Ext JS 6示例应用程序 注意事项 自定义JS压缩 小结 概述 这么多年来,Web开发人员都被 ...
- Ext JS 6和Sencha CMD 6 快速入门
Ext JS 6和Sencha CMD 6的入门很简单.一个命令,即可生成一个功能完整的“通用”应用程序,可以运行在本地服务器上. 这个“通用”的应用程序包含一组核心的stores,模型(models ...
- 在线制作一键生成微信小程序实现原理之需求分析
随着微信小程序接口不断的放开,小程序在今年或许是明年必将成为商家的一个标配,这个标配的标准就是要开发周期短,费用低,功能实用.只有这样才能让线下的广大商家快速接入.现在也有好多公司开发出了一键生成快速 ...
- 【vsCode】识别.vue/一键生成.vue模板文件
1.安装插件Vetur 结果 ---> .vue代码识别彩标 2.配置.vue文件模板,以便快速一键生成格式化 2.1新建代码片段 File->Preferences->User S ...
- VSCode 初次写vue项目并一键生成.vue模版
VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...
- 利用代码生成工具生成基于ABP框架的代码
在前面随笔,我介绍了整个ABP优化过框架的分层模型,包括尽量简化整个ABP框架的各个层的关系,以及纳入一些基类的辅助处理,使得我们对应业务分层类或者接口尽可能减少代码,并具有生产环境所需要的基类接口, ...
- [ExtJS5学习笔记]第三节 sencha cmd学习笔记 生成应用程序构建的内部细节
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38316829本文作者:sushengmiyan------------------- ...
随机推荐
- C#+ html 实现类似QQ聊天界面的气泡效果
/**定义两个人的头像*/ Myhead = "<img src=qrc:/chatdemo/Msg/Head.png width='30px'heigth='30px'>&qu ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...
- ASP.NET MVC PartialView用法
子页面AreaSelect.cshtml页面的Controller代码: public ActionResult AreaSelect() { return PartialView(); } 父页面前 ...
- 获取DataTable选择第一行某一列值
数据源是一个DataTable,现在我们需要获取这个DataTable的第一行第一列的值.先准备一个数据集,创建一个DataTable,并填充数据: source code: using System ...
- LINQ的Any方法
返回布尔值,判断集合中是否有元素满足某一条件. source code: IEnumerable<string> str = new List<string> { " ...
- sQLserver T-SQL 事务的用法
原文在: https://www.lesg.cn/netdaima/2016-55.html 在使用Mssql的时候经常需要用到存储过程 有些操作在前面发生错误的时候:需要回滚:这就需要事务了: 下面 ...
- 高德携手阿里云发布“LBS云”,账户打通只是第一步
位置.游戏.视频,是公认的基于云计算的三大移动端应用方向.而今,LBS云有了更多进展,在高价值应用与云平台之间实现了资源打通和融合,高德迈出了实质性的一步. 高德地图副总裁郄建军(左)与阿里云业务总经 ...
- 经典案例:那些让人赞不绝口的创新 HTML5 网站
在过去的10年里,网页设计师使用 Flash.JavaScript 或其他复杂的软件和技术来创建网站.但现在你可以前所未有的快速.轻松地设计或创造互动的.有趣好看的网站.如何创建?答案是 HTML5 ...
- [js开源组件开发]tip提示组件
tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...