extjs5 sencha cmd 5 的介绍及使用

妖狐艹你老母 2022-08-06 14:15 111阅读 0赞

最近在学习extjs5.x的时候 对sencha cmd 5 进行了详细的了解  sencha cmd 的主要功能 完成ext项目的构建 编译 打包 还可以构建本地web服务器  
搭建 sencha cmd 环境  
安装jdk（使用版本是1.7）  
安装ruby（使用版本1.9.3）  
安装sencha cmd 5 （使用版本5.1.0.26 需配置环境变量）  
1.extjs项目的生成和运行  
下载ext5.1 sdk  
然后 在windows 终端 运行

sencha -sdk \{pathToSDK\} generate app \{appName\} \{pathToProject\}

比如说你 sdk在 d：/ext-5.1 要生成的项目名称demo 路径是d:  命令就是 sencha -sdk d:/ext-5.1 app demo d:/

启动构建好的项目

sencha fs web -port {port} start -map {pathToProject}

可以直接在项目路径下 执行 sencha fs web start 就会以默认端口和当前路径启动项目   直接访问 http://localhost:1841即可

2.项目模块及文件的生成

cd /path/to/MyApp
    sencha generate model User id:int,name,email

会在 model 模块下生成 名为User并包含三个字段的 model文件

cd /path/to/MyApp
    sencha generate view foo.Thing

同理 会在view模块文件夹下生成对应文件

cd /path/to/MyApp
    sencha generate controller Central

同理 会在controller模块文件夹下生成对应文件

3.主题及封装包使用

比如说项目需要搭建统一的架构则需要 创建统一的组件这样就可以 在项目package下创建自己的主题文件夹

主题的开发需要一些环境的搭建

gem install compass // 安装 sass预编译样式
    compass -v // 查看 compass  版本
    sass -v // 查看 sass 版本

主题文件夹的创建

cd {pathtoproject} // 项目
    sencha generate theme myTheme // 自定义主题名称

将主题文件更换为自定义

cd {themepath}/var   //
    echo $base-color: #745858 !default; > Component.scss  // 改变 $base-color

然后 执行

cd \{themepath\}

sencha package build  // sencha package build --clean 清除构建

其次将根目录app.json中默认的主题配置 修改为自定义样式

4.项目的重新构建

项目的主题文件或者配置文件发生改变的时候 需要对项目进行重新构建

cd {pathtoproject}

sencha app build

5.项目sdk升级

cd \{pathtoproject\}

sencha app upgrade [ path-to-new-framework ]

6.开启开发模式 可以自动检测文件变动 并重新构建

<pre name="code" class="plain">cd {pathtoproject}
    sencha app watch

sencha cmd doc url

http://docs.sencha.com/cmd/5.x/cmd_packages/cmd_packages.html

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关 Sencha cmd 个人操作实例

注意：运行 sencha generate 命令需在 SDK目录（如下图所示）执行。（因为创建app 或 workspace都需复制此目录下的文件）： ![Center][]

快来打我*/ 2022年08月18日 15:27/ 0 赞/ 123 阅读

相关 ExtJS 4.2：Sencha Cmd 介绍

背景本来不打算写这篇文章的，但是按照官方文档的介绍，还是会出现一些问题。该文章就是简洁的介绍一下如何使用Sencha Cmd及其注意事项。官方文档 [I

た入场券/ 2022年08月18日 15:26/ 0 赞/ 158 阅读

相关 sencha cmd新建sencha touch项目

1、从官方网站[http://www.sencha.com/][http_www.sencha.com] 下载 [sencha-touch-2.4.1-commercial.z

柔光的暖阳◎/ 2022年08月08日 13:47/ 0 赞/ 161 阅读

相关 extjs5 sencha cmd 5 的介绍及使用

最近在学习extjs5.x的时候对sencha cmd 5 进行了详细的了解 sencha cmd 的主要功能完成ext项目的构建编译打包还可以构建本地web服务器

妖狐艹你老母/ 2022年08月06日 14:15/ 0 赞/ 112 阅读

相关 Extjs6自学笔记之Sencha Cmd（一）

Sencha Cmd 官网下载：[http://www.sencha.com/products/sencha-cmd/download][http_www.sencha.co

梦里梦外;/ 2022年08月05日 07:56/ 0 赞/ 116 阅读

相关 Extjs6自学笔记之使用Sencha Cmd6建立工程项目（二）

一、打开MyEclipse新建一个名为Extjs6Demo的web项目二、打开cmd，进入到项目工程WebRoot目录下，如图所示： ![0.jpg][] 三、执行命令

桃扇骨/ 2022年08月05日 07:55/ 0 赞/ 134 阅读

相关 Sencha发布移动HTML5图表库

本文来源于我在InfoQ中文站翻译的文章，原文地址是：http://www.infoq.com/cn/news/2011/08/sencha-touch-charts 近日，

分手后的思念是犯贱/ 2022年06月18日 00:16/ 0 赞/ 140 阅读

相关 html5 meta(移动端）介绍及使用

随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一

向右看齐/ 2022年06月15日 22:50/ 0 赞/ 191 阅读

相关 [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简单介绍

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38537431][http_blog.csdn.net_sus

曾经终败给现在/ 2022年03月30日 13:20/ 0 赞/ 158 阅读

相关 sencha cmd metadata

明天元旦，首先祝自己元旦快乐！15年惊喜不断！时间真快，匆匆四年，[http://down.51cto.com/data/156763][http_do

分手后的思念是犯贱/ 2022年01月14日 01:45/ 0 赞/ 144 阅读