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 相关文章推荐
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
小程序实现上传视频功能
Aug 18 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
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
PHP 编写大型网站问题集
2010/05/07 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
专业销售业务员求职信
2013/11/18 职场文书
预备党员入党感想
2015/08/10 职场文书
早上好问候语大全
2015/11/10 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python