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 的升级
- …
这里不展开说明,大家可以自行谷歌或者查看官方文档。