【Extjs学习笔记01】使用Sencha Cmd构建项目

【Extjs学习笔记01】使用Sencha Cmd构建项目

文章来自http://vinceok.com/

文章背景

最近由于项目需求需要使用Extjs来开发，于是便在网上铺天盖地的找起了各种资料，期间的过程也是各种蛋疼，犯了很多低级的错误，走了很多弯路，于是打算写下这个【Extjs学习笔记】系列来记录一下自己的学习心得，Extjs有些版本不是开源的，因此如果要使用到商业里面去的话请注意相关问题。

Extjs是什么

我不用官方的语言来解释Extjs是什么，我出自我自己对它的理解，Extjs是一个基于Javascript的富客户端框架，它很大，因此不建议使用在普通web 项目上，那么它适用什么场景呢？我的答案是后台管理系统，它适用于功能复杂的后台管理系统，这是我目前的理解，也许越到后来越会有别的体会。

环境配置

Extjs使用我个人建议配合Sencha Cmd命令工具使用，下面我会介绍配置方法，首先给出Extjs 5.1.1的下载地址(其他版本请把上述链接中的5.1.1替换成所需要的版本再粘贴到迅雷里下载)

http://cdn.sencha.com/ext/gpl/ext-5.1.1-gpl.zip?mkt_tok=eyJpIjoiWW1FME5qTmhaamMwWmpjMSIsInQiOiJhdGpaeXppTFJRNFZBYXNNbVJYelY1Qk4xMFwvQmszOGpadjdcL2NcL1wvcmR0MERtSmlrSlMxdlVpblF0Q3RZMEx2enhjTVBKMzlnWFwva2lqaVI4YUhnQkFvSXdkUTRXSGJycWxHRVBiM1dsa1p3PSJ9

Sencha Cmd是什么

Sencha Cmd是一个快速构建项目的工具，下面给出几个步骤来配置整个环境。

1:下载，请下载适合你Extjs的版本，我们5.1.1版本的Extjs就选5.1.3吧，下面是下载地址

https://cdn.sencha.com/cmd/5.1.3.61/SenchaCmd-5.1.3.61-windows.exe.zip

2:下载解压后点安装，一直next,注意，不建议更换默认安装路径，因为我更换后后面构建项目以及编译会出错（因为这一点，坑了我一下午，TMD）.

3:安装好后，请安装Java的开发环境和Ruby的开发环境（因为Sencha Cmd的某些工作需要基于Ruby）以及Sass，在这里，我给你们介绍一款神器：https://chocolatey.org/，这个东西呢可以通过命令行快速下载你所需要的东西并配置相应环境，例如我们这里的JRE和Ruby，下面进入网站，我们需要先安装chocolatey，在管理员模式下进入CMD命令行（或者win10的Powershell），输入下列代码：

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

安装成功后关闭命令行重进，输入choco，显示其版本就算安装成功.

4:随后输入choco install jre，等其安装成功后关闭命令行重进，输入java -version，显示了java的版本就算成功

5:同样的道理安装Ruby(请安装1.9的版本，其他版本可能有问题),输入choco install ruby1.9，等其安装成功后关闭命令行重进，输入ruby -v，显示了ruby的版本就算成功

备注：有的同学之前就已经配置过java的环境，那么这里就不用配置了（比如我）。

6：再然后，安装Sass，同样在管理员模式下运行命令行，输入choco install sass，就能安装了，安装完成后检查版本就能判断是否安装成功。

然后进入正题，开始构建项目，这里面也有很多坑，关于路径方面的

构建项目的代码如下

sencha -sdk 你的sdk路径 generate app 你的项目名称 你的项目目录

这里需要重点讲一下，我的sdk(就是extjs的包)放在f盘下的ext-5.1.1，我的项目是放在xampp/htdocs/demos里的，所以先在命令行里进入这个目录（请理解这句话，这就是为什么我下面的项目目录路径只有一个Payment的原因），再执行以下代码

sencha -sdk f:/ext-5.1.1 generate app Payment Payment

这里说一下，我本地环境是基于xampp的集成环境，项目都放在xampp/htdocs下的，虽然Sencha Cmd自带了一个小型的服务器环境，但是不建议使用。想用的话也很简单，进入命令行，输入sencha web start就行了
项目创建好后，到你的目录下去看吧，是不是已经有很多文件了，但是你会发现你的项目文件夹很大，因为那是没有编译的，并不是最终工程版，编译项目命令如下：sencha app build，编译完成后，项目文件夹下的build下就是用于生产环境的项目了，初始只有1.9M左右。

到这里，第一期心得算是基本完成了，以后有时间继续完善吧。对这一期有问题的同学可以下面留言，有问题多上网查查。

相关资源

extjs学习笔记：http://blog.csdn.net/sushengmiyan/article/details/38295575
extjs中文网：http://extjs.org.cn/
extjs官方案例：http://examples.sencha.com/extjs/?mkt_tok=eyJpIjoiTUdJMU1qRXpOakZsTmpobCIsInQiOiJ5UXdRcDhVVmpEMytBaUhheGxUR0p2S1ErdDZySVZIRTdpbkVqWEM5eG5zdyt0czM0cWxmV1RlY1JoN1ZDZFgwUnRKVFpad2tIRWJvZVgwRG1PbUZTUXd6R3phb1dyWE94OFVPclwvZ1wvWnhZPSJ9
extjs API ：http://extjs-doc-cn.github.io/ext4api/#!/api/Ext