ExtJs6.0.0学习之路（一）安装与配置

前言：

最近要给学校重新做一个系统，老师要求有移动端，摸索了几天，发现ExtJs是一个很不错的选择，特别是ExtJs6已经把ExtJs和Sencha Touch整合到一起，这样移动和桌面就可以一起开发了。下面开始ExtJs之旅。

ExtJs 6.0 的博文和教程实在是太少，只能看官网的API。确实有很大的困难。此系类博文是自己在学习中的一些所得，难免有弯路，错误的地方，还请看到的朋友谅解。

安装：

首先先去官网或者百度搜一下ExtJs6.0官网下载可能比较费劲。下载以后是一个压缩包，解压到一个目录下。可以看到如下的结构：

可以看到里面有一个index.html这个用chrome打开后可以看到一个主页，关于介绍ExtJs的，里面有一些例子，也有一些连接供大家入门学习。在这里不展开说了。
有人会发现ExtJs的内容好多，大约几百兆，实际上这里包含了许多资源文件和例子，我们正常开发用不到那么多，官方给我们提供了一个Sencha CMD工具来管理ExtJs项目。Sencha CMD下载地址：

Sencha CMD

下载后一直“下一步”安装即可。安装以后CMD下输入 sencha会有如下的显示：

说明sencha cmd安装成功。有了他我们就可以轻松地建立ExtJs项目了。

配置：

想要建立新的项目需要在控制台输入一下命令：
1.首先cd到你ExtJs所在的目录下（方便）
2.控制台输入：sencha -sdk [ExtJs6.0文件夹地址] generate app [项目名称] [项目路径]
例如我要在当前目录创建一个叫App的项目放在MyApp文件夹下就可以这样输入：

sencha -sdk ext-6.0.0 generate app App MyApp

这样sencha cmd 就会为我们建立一个ExtJs小的项目，我们在此基础上学习和操作就可以了。新建立的项目如图所示：

其中注意有两个文件夹：classic和modern，他们分别是桌面端和移动端代码放的位置。ExtJs项目是MVC模式的，在上面两个文件夹下放的一般是View页面。因为移动端和桌面的页面布局肯定不一样。他们的逻辑是相同的。所以桌面和移动端的逻辑被放在了app文件夹下，打开文件夹可以看到子文件夹view下的main文件夹下有两个文件，一个是MainContorller.js一个是MainModel.js分别是View的数据模型和控制器。

另外主要的文件夹例如：sass是放置样式的resources是放置资源的。其他的先不用管他。

部署：

其中下面有一些文件：
1.app.js是应用程序配置文件，描述了应用程序的名称启动页等
2.app.json也是应用程序配置文件，主要描述了一些路径，ExtJs中集成了很多资源比如一些js和css等，他做的作用是，描述这些资源的位置等
3.bootstrap.js是引导文件，在项目启动前做启动引导，简单地说就是把该引入地引入，该配置地配置，以便加载好所需资源，显示项目页面。bootstrap.js是从app.json中读取配置然后启动的。
4.index.html是项目的主页，如果你直接打开会发现什么也显示不出，这是因为需要把项目放在服务器中才能启动，你可以把他放在tomcat中也可以放在iis中然后再通过index.html访问。如果觉得配置服务器麻烦，sencha cmd 给我们提供了一个方便的方法：

打开控制带cd到这个项目下，输入一下命令：

sencha app watch

他会自动在本地1841端口建立一个服务器，并把当前项目部署到服务器上：

这时候我们便可以访问这个项目了，浏览器中输入：

localhost：1841

可以看到如下界面：

至此，项目的安装和部署就完成了，一个ExtJs6.0的项目就出现了。下次将开始探寻ExtJs6.0