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 Select操作大集合
May 26 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
vue之nextTick全面解析
May 17 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
vue首次渲染全过程
Apr 21 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
python文件写入实例分析
2015/04/08 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
珍惜资源保护环境的建议书
2014/05/14 职场文书
领导干部对照检查材料
2014/08/24 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
公司股份合作协议书
2014/12/07 职场文书
个人工作保证书
2015/02/28 职场文书
消防隐患整改通知书
2015/04/22 职场文书
三八节祝酒词
2015/08/11 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript