Extjs6.2系列之开发环境搭建

Extjs6.2环境的搭建跟Extjs4.2有所不同,sencha公司推出了shencha cmd这款工具可以方便的搭建一个Extjs Mvc项目。使用cmd的最直接的两个好处就是可以生成代码框架和针对性的对你的ext项目编译。你可以通过Sencha cmd的命令直接是生成一个应用框架,不必自己再写app.js 等很多代码,想想就爽哈哈;Extjs功能强大,对很多的功能都进行了封装,但是有许多功能我们都暂时都用不到,导致在4.2版本时即使是一个很小的项目都需要引入全部的extjs代码,网站就很笨重,在之后的版本中,Extjs通过Sencha cmd工具对js代码进行“编译”只将你用到的功能代码提取出来形成一个“编译”后的特殊版本,相当程度上优化了性能,减少了冗余。Sencha cmd的使用方式在生成应用时会具体介绍。

一、下载sencha cmd 和 Extjs6.2

由于Extjs是商用软件,想要免费的使用会有一些限制条件,但是学习者的我们先不用管这个。在下面的网址填写你的一些信息,会有邮件发送到你的邮箱,邮件中就包含了下载链接,包括Extjs的压缩包,cmd的压缩包。

https://www.sencha.com/products/extjs/evaluate/  外国网站访问可能会比较慢,笔者在这里提供一个Extjs6.2版本压缩包的百度云链接(http://pan.baidu.com/s/1i5sQ4Cl)由于cmd会有使用者操作系统之分,笔者使用的是ubuntu,应该比较小众,就不提云盘供链接了,各位可以根据sencha的邮件链接下载。

二、安装cmd,搭建第一个应用

http://docs.sencha.com/cmd/guides/extjs/cmd_app.html  这是官方给出的文档,本文以下部分也都基于官方文档。只是英文的文档可能有人不怎么愿意读,我在下面简单地给出步骤。

安装好cmd,配置cmd的环境变量(这个过程我就不详细讲了,环境变量的配置过程自行百度),将下载好的extjs6.2解压至硬盘任一位置,假如是D:/Extjs6.2.0 。

打开命令行界面,执行如下指令:

	sencha -sdk D:/Extjs6.2.0 generate app MyApp D:/MyApp
以上指令的含义为在 D:/MyApp目录生成一个叫MyApp的项目,这个项目使用的Extjs库为D:/Extjs6.2.0目录下的Extjs。此项目就是一个Extjs项目的框架,里面预先写好了一个主页面,你可以根据需要修改或者重写,那么要如何查看这个生成的项目呢?
首先在命令行里面转到生成的MyApp所在的目录(不会的同志自行百度cd命令)即 D:/MyApp,然后执行如下命令
sencha app watch 
如果上述步骤都没有问题并且默认端口没有被占用,将会提示你可以打开浏览器在网址栏输入localhost:1841访问该项目。如果此端口被占用,命令行界面会提示并给出正确的端口号。
项目主页效果如下


若最后项目代码编写调试完成,则使用如下命令进行“编译”:

sencha app build
如果“编译”过程没有错误,则会在 MyApp所在目录下的build文件下生成最终的Extjs 项目代码,通常只有其文件狭小只有十几兆,远远小于Extjs4.2时代数百兆的数据量。


PS:初写博客,内容难免有疏漏之出,还望多指正包含。本文属于Extjs6.2系列,此系列将来会由更多的内容,笔者会逐步更新。

展开阅读全文

没有更多推荐了,返回首页