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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
javascript中"/"运算符常见错误
Oct 13 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
JS实现瀑布流布局
Oct 21 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
Vuex模块化应用实践示例
Feb 03 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php4的session功能评述(二)
2006/10/09 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
浅谈php提交form表单
2015/07/01 PHP
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
Python爬取附近餐馆信息代码示例
2017/12/09 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python实现简单猜单词游戏
2020/12/24 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
承认错误的检讨书
2014/01/30 职场文书
还款承诺书范文
2014/05/20 职场文书
小组名称和口号
2014/06/09 职场文书
艾滋病宣传标语
2014/06/25 职场文书
环保志愿者活动总结
2014/06/27 职场文书
写给医生的感谢信
2015/01/22 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js