sencha ext js 6 快速入门(必看)


Posted in Javascript onJune 01, 2016

Sencha Ext JS号称是目前世界上最先进和最强大的、支持多平台多设备的JavaScript应用程序开发框架。首先看一下Ext JS的发展简史。

1 Ext JS发展简史

1.YUI-Ext的作者Jack Slocum(杰克.斯洛克姆)打算对基于BSD协议的Yahoo User Interface (YUI)库进行自定义的扩展,但后来一度风头盖过其父辈YUI;

2.在2006年底,YUI-Ext被简化为Ext,反映了它作为一个框架的成熟和独立。该公司成立于2007年初,Ext现在为双执照,使用LGPL和一个商业执照;

3.在2007年4月1日,发布1.0正式版,现在的版本为6.0;

4.从4.0开始引入了MVC/MVVM风格的应用架构和SCSS;

5.从5.0开始,不再支持老旧浏览器,如IE5、6、7等;

6.从6.0开始,Sencha Touch和ExtJS合二为一,标志着用户可以开发既能支持传统桌面、又支持平板或手机的应用

2 开发准备

1. 首先需要下载Ext JS SDK,下载ExtJS 6.0 SDK GPL正式版  https://www.sencha.com/legal/gpl/ ,如果需要商业应用,请下载商业版。解压到D盘。

2. 下载Sencha Tool ,假设你的系统里没有安装了JRE7+,请下载带JRE版本的Sencha Tool,并成功安装。

3 项目创建

1. 用管理员打开命令行,用 cd /d d:\ext-6.0.0 进入SDK目录

2. 用 sencha -sdk ./ext-6.0.0 generate app -classic cmpwebui  ./CMPWebUI 命令创建基于ext-6.0.0版本的名为cmpwebui的app,项目路径为./CMPWebUI.

sencha ext js 6 快速入门(必看)

在目录D:\ext-6.0.0下生成CMPWebUI项目文件,文件结构如下:

sencha ext js 6 快速入门(必看)

      3. 进入项目文件下,用 sencha app watch 项目预览,端口号默认为1841,如果当前已有,则会递增,这里端口为1842

sencha ext js 6 快速入门(必看)

     在浏览器中输入http://localhost:1842/进行预览,和我一开始期望的不同,里面包含官方的例子,可以点击【view the Example】进行查看。

sencha ext js 6 快速入门(必看)

sencha ext js 6 快速入门(必看)

sencha ext js 6 快速入门(必看)

那么自己创建的项目在哪呢?可以输入http://localhost:1842/cmpwebui/ 进行查看

sencha ext js 6 快速入门(必看)

 4. 项目发布,用sencha app build进行编译

sencha ext js 6 快速入门(必看)

 

sencha ext js 6 快速入门(必看)

编译完成后,可以在ext-6.0.0下的build文件下看到此发布的项目。

 5. IIS项目发布,这里需要注意配置IIS来解析JSON,否则网站无法预览、

sencha ext js 6 快速入门(必看)

想要运行其实很简单,只要能让*.json的文件能够被Web服务器解析即可,这里以IIS7为例说明。

1)安装IIS7的ASP支持

控制面板-->程序和功能-->打开和关闭Windows功能-->角色-->添加角色服务-->应用程序开发-->选择ASP

2)给默认网站添加MIME类型

添加-->文件扩展名为json,MIME类型为text/json(或application/x-javascript也可以)

3)给默认网站安装脚本映射

处理程序映射-->添加脚本映射。请求路径为*.json,可执行文件为%windir%\system32\inetsrv\asp.dll,名称为json

4)在默认文档中添加index.html

5)在默认网站下创建SenchaTouch应用程序,IIS6下称作虚拟目录。

6)使用Chome预览(IE不支持)

至此配置完成后,可以看到文件夹下多了 一个web.config

sencha ext js 6 快速入门(必看)

再刷新网页即可:

sencha ext js 6 快速入门(必看)

以上这篇sencha ext js 6 快速入门(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
Vue文件配置全局变量的实例
Sep 06 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 #Javascript
分享一个插件实现水珠自动下落效果
Jun 01 #Javascript
js匿名函数作为函数参数详解
Jun 01 #Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 #Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 #Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 #Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 #Javascript
You might like
模仿OSO的论坛(四)
2006/10/09 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
重新认识php array_merge函数
2014/08/31 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
jquery插件之easing使用
2010/08/19 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
pygame实现弹球游戏
2020/04/14 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
老师给学生的表扬信
2014/01/17 职场文书
2014年小学工作总结
2014/11/26 职场文书
投资申请报告
2015/05/19 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技