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 的升级

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

时间: 2024-08-05 11:15:13

1、手把手教你Extjs5(一)搭建ExtJS5环境的相关文章

手把手教你认识并搭建Nginx

手把手教你认识并搭建Nginx Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,它已经在该站点运行超过两年半了. Igor 将源代码以类 BSD 许可证的形式发布.尽管还是测试版,但是,Nginx 已经因为它的稳定性.丰富的功能集.示例配置文件和低系统资源的消耗而闻名了. 一. Nginx 的优点: 作为 W

手把手教你用jumpserver搭建堡垒机!

首先,jumpserver是什么呢? Jumpserver 是一款由Python编写开源的跳板机(堡垒机)系统,实现了跳板机应有的功能.基于ssh协议来管理,客户端无需安装agent. 特点: 完全开源,GPL授权 Python编写,容易再次开发 实现了跳板机基本功能,认证.授权.审计 集成了Ansible,批量命令等 支持WebTerminal Bootstrap编写,界面美观 自动收集硬件信息 录像回放 命令搜索 实时监控 批量上传下载 jumpserver 3.0 安装 相对于 jumps

手把手教你用express搭建个人博客

新手入门指引,如果你很熟悉express的用法那么就可以跳过教程到底部,到github看下源码 1.首先需要安装node环境,版本最新比较好,最低4.0+吧 我本地的node环境是6.4: 2.express中文官网:http://www.expressjs.com.cn/,在这里大家可以学习完整的express框架 3.到官网可以学一些express的基础用法,初始化一个项目seed可以使用express生成器 npm install express-generator -g 4.接下来用生成

手把手教你用vue-clic3搭建vue-element-admin项目

下载element-admin框架 点击该地址:https://github.com/PanJiaChen/vue-element-admin 用git clone https://github.com/PanJiaChen/vue-element-admin或者直接下载压缩包都可以 2.安装依赖 打开项目根目录,在根目录下使用npm install 安装依赖,这种方式可能耗时较长,可采用镜像安装npm install --registry=https://registry.npm.taobao

手把手教你配置Hbase完全分布式环境

HBase配置相对比较简单,下面的教程也是基于我上面2篇Hadoop配置的环境下继续往下添加HBase的分布式配置,这次我的HBase安装目录放在跟Hadoop同一目录下面,节点信息跟我前一篇Hadoop完全分布式配置完全一样,不清楚的话可以参考我那篇文章. HBase根目录:/usr/mywind/hbase HBase的版本:0.98.8-hadoop2 有图有真相: 完整配置步骤:hbase-env.sh → hbase-site.xml → regionservers 当然,配置之前的惯

东方耀 手把手教React Native实战开发视频教程+源码笔记全集

课程序号标题 第0课0.手把手教React Native实战之开山篇_视频 第1课1.手把手教React Native实战之环境搭建_视频_Windows环境 第1课1.手把手教React Native实战之环境搭建[Mac真机]同时调试开发Android&IOS 第2课2.手把手教React Native实战之从React到RN 第3课3.手把手教React Native实战之flexbox布局(RN基础) 第4讲4.手把手教React Native实战之flexbox布局(伸缩属性) 第5讲

手把手教你搭建LyncServer2013之准备篇(一)

这次实验的拓扑结构如下: 首先准备AD域,把DC这台服务器提升为域服务器,在这里,域服务器的安装就不上图了,DNS会随域控制器的安装一起安装,这次安装的Lync版本为Lync Server 2013,规划的Lync内部WEB地址和外部WEB地址一样,都为pool01.iSusan.cn,而两台Lync前端做为DNS轮询负载,所以在DNS下需要加入如下A记录: 192.168.137.12 pool01.iSusan.cn 192.168.137.13 pool01.iSusan.cn 192.1

手把手教你搭建LyncServer2013之CA准备(二)

首先进行CA服务的安装,安装完后在组策略中配置计算机证书自动申请 到此,证书服务器已经安装完成,下一步开始配置计算机自动证书申请 手把手教你搭建LyncServer2013之CA准备(二),布布扣,bubuko.com

手把手教你搭建LyncServer2013之Lync后端存储准备(三)

这次实验的Lync后端存储安装的是SQL Server 2012,配置了高可用,两台做Mirror,一台做见证服务器,实现故障的自动转移,SQL Server的安装需要.net Framwork 3.5的支持,所以在安装SQL之前,我们先来安装.net Framework 3.5 安装完.net Framework 3.5后,我们开始第一台SQL Server 2012的安装 到此第一台Lync后端存储服务器已经安装好,因为我这次实验中需要安装监控和存档角色,所以在安装数据库的时候选择了三个功能