1、手把手教你Extjs5(一)搭建ExtJS5环境

Ext JS 5 的主要特性包括：

• 新的数据绑定方式
• 新增支持 MVVM 模式，并且依然支持 MVC 模式
• 对手持设备更友好，针对触屏设备进行优化
• 新的主题 Crisp / Neptune Touch（针对触屏优化）
• Routing / URI
• 抛弃对超旧浏览器的支持，目前支持 IE 8+ / Safari 6+ / Opera 12+ /Firefox / Chrome / Safari iOS 6+ / Chrome Android 4.1+ / IE 10+ Win 8
• 抛弃旧浏览器带来的性能提升
• Widgets
• 新的组件（如 Tagfield 等）

Sencha Cmd 5 with ExtJS 5 的注意事项

下面我先来分享一下我在使用 Sencha Cmd 5 with ExtJS 5 时候遇到的需要注意的地方：

• 如题所示，ExtJS 5 需要 Sencha CMD 5 ，不再支持 Sencha Cmd 4.x
• Sencha Cmd v5.0.0116 有 BUG ，使用的时候会遇到 Ext.Factory.controller is undefined 的问题
• sencha upgrade 命令还没准备好，无法安装最新的 Sencha Cmd v5.0.0.160，而是安装 5.0.0116

Sencha CMD 5 with ExtJS 5

1. 下载并安装 Sencha Cmd

sencha upgrade 无法保证最新的版本（小版本）。

所以请到官方网站： http://www.sencha.com/products/sencha-cmd/download 下载最新版本的 Sencha Cmd，并执行安装。

安装后，需要重启你的终端（命令行面板），才可以启用 Sencha Cmd 5

2. 下载并解压 ExtJS 5 SDK

请到官方网站下载最新的 SDK ：https://www.sencha.com/products/extjs/

下载完解压后会得到一个 ext-5.0.0 的包（文件夹形式）

3. 使用 sencha generate app 命令生成 ExtJS 项目环境

需求：安装 Sencha Cmd 5  Ruby 1.9.3  ExtJS SDK ( Ruby 1.9.3 各平台的安装方式请自行谷歌，Sencha Cmd 4.x 的时候仅支持 Ruby 1.9.3 ，5.x 未验证是否支持其它版本，但支持 5.x ）

打开终端（Windows 下是 CMD），然后运行以下命令：

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

其中 pathtoSDK 是 ExtJS SDK 的路径，appName 是 ExtJS APP 的 app name ，pathToProject 是要生成后要保存的路径 
举个例子：

sencha -sdk /Users/lingyired/Documents/framework/ext-5.0.0 generate app fivedemo /Users/lingyired/Documents/extjs/fivedemo

完成之后，/xxx/xxx/extjs5demo 这个目录下，就会有一个 名为 fivedemo 的 ExtJS 5 项目。

4. 如何访问项目

由于 ExtJS 项目使用 XMLHttpRequest 来动态加载不同的 JS 文件，所以项目无法支持直接打开静态的 HTML ，如果你直接打开，可能会得到类似的报错：

*XMLHttpRequest cannot load file:xxx/fivedemo/bootstrap.json. Cross origin requests are only supported for HTTP. *

也就是说，你想要访问这个 demo 项目，就需要一个小型的服务器环境。

而 Sencha Cmd 是支持这个服务的。

先在终端进入到项目的目录：

cd /Users/lingyired/Documents/extjs/fivedemo

然后运行：

sencha web start

然后就可以访问 http://localhost:1841/ 访问这个项目了

sencha web 支持 -port 参数来设定端口，如：

Last. Sencha Cmd 的其它运用

• 使用 Sencha Cmd 的一个重要的原因是它方便项目的打包，使用 sencha app build 就可以打包（代码要规范）
• ExtJS Theming 离不开 Sencha Cmd
• ExtJS SDK 的升级
• …

这里不展开说明，大家可以自行谷歌或者查看官方文档。