没有合适的资源?快使用搜索试试~ 我知道了~
首页Extjs6示例中文版
Extjs6示例中文版
3星 · 超过75%的资源 需积分: 45 124 下载量 82 浏览量
更新于2023-03-16
评论 2
收藏 10.11MB DOCX 举报
Ext Js 6 By Example 中文翻译 内容来自网上,保留网页上内容不做更改。
资源详情
资源评论
资源推荐
Ext JS 6 学习文档
第 1 章–ExtJS 入门指南
2015
年
12
月
3
日 admin%1 $ S
Ext JS 入门指南
前言
本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学
习资料还很少。google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子
书 [Ext JS 6 By Example]。这份资料在 PACKT上卖 35.99 刀的,当然了万能的
google 还是帮我下载到了 PDF 文档。大概看了一下,讲的很详细,例子也比较简
单,容易理解,现我准备利用工作之余翻译这份文档,为自己学习加深理解,也希
望能帮助更多的人学习。
翻译时,我并不会 100% 按照原文照搬,而是可能加上我的理解和我自己的看法,
所谓求其上而得其中,求其中而得其下,如果你看到这个文章,也不要以此作为标
准,保持你的意见和思想。
转载请注明出处:http://www.jeeboot.com/archives/1211.html
正文
现在如果你打算学习 Ext JS 了,那你应该告别使用普通的 JavaScript 了。
JavaScript 是一个伟大,卓越的语言,但是随着 web 应用越来越大,我们的代码
也越来越难以维护,这是十分困难并耗费时间的。
普通的 JavaScript 非常的灵活,这有很多优点,同时这样也会带来很多问题,随
着你的应用越来越大,参与的人就越来越多,普通的 JavaScript 让 10 个人来写,
就会有 10 种不同的风格,往往有些代码只有写代码的当事人知道为什么这么写,
如果这个人不再负责这个功能,就会成为后来人的坑。所以在代码上的约束和规范
是十分有必要的。这也是为什么我一直喜欢 ExtJS 的原因,ExtJS 写起来代码就像
Java 一样,非常严谨,非常面向对象。缺点就是在前端 JS 库中属于比较重量级,
学习曲线相对陡峭。
当涉及到 JavaScript 框架时,有客户端的 JavaScript 框架以及服务端的
JavaScript 框架。Ext JS 就是一个客户端的 JavaScript 框架。
在本章基本上是讲述关于如何使用我们所需的工具来设置开发环境以及 Ext JS 的
基本介绍。在这一章,我们主要涉及以下几点:
使用 Ext JS 的优点
对 Ext JS 的介绍
安装设置 Sencha Cmd 和 Ext JS
使用 SenchaCmd 搭建 Ext JS 应用
Ext JS 应用的体系结构
探索 Sencha Cmd 命令
如何调试 Ext JS 应用
使用开发工具 IDE
为什么使用 Ext JS?
既然推荐你使用,自然要告诉你使用 Ext JS 都有哪些看得见的好处。现在让我们
瞧一瞧,在你的应用里使用 Ext JS 相较普通 JavaScript 有哪些优点。
跨浏览器支持
只要你做 web 开发,你一定解决过浏览器兼容问题,这有多么消耗时间和影响工
作进度你一定有体会,你可能会花上几小时甚至几天来解决跨浏览器 bug。你为什
么不把这些时间用来关注你的业务功能呢?相反,如果使用 Ext JS 这个
JavaScript 框架,这种事情将由它去考虑,而你可以专注于业务功能。
丰富的 UI 组件
Ext JS 提供了大量丰富的 UI 控件,如 data grid ,tab panels,tree 控件,日期选择
工具,图表 等等,Ext JS 作为一站式的前端框架,有很多优秀且实用的控件,尤
其是表格对复杂数据展示的支持是其他的 JavaScript 框架不具备的, 这些都能大
量节省你的开发时间。
双向数据绑定
双向数据绑定意味着当视图 view 的数据发生变化,你的模型 model 将自动更新。
同样的,当你的应用更新这个模型 model,这个数据也将自动传递到 view。
就拿编辑页面来举栗。 当这个页面(view)加载,这时已经渲染了来自模型(model)
的数据到 HTML,并且当用户在页面(view)上更新这个数据,这时候你需要更新你
的模型(model),但如果你使用 Ext JS 将不需要你自己去做这些编程。
JavaScript 的架构模式(MVC/MVVM)
随着越来越多的代码转移到客户端,维护客户端的 JavaScript 代码变的非常困难。
通过在客户端使用 MVC(Model View Controller)/MVVM(Model View, View
Model) 使维护客户端的 JavaScript 变得更容易,并提高了生产效率。关于 MVC
和 MVVM 架构模式会在本章后面解释。
简化复杂的操作
想象一下使用纯 JavaScript 写一个 AJAX 调用,你需要考虑确保支持所有浏览器,
这你可以看一下任何的 JavaScript 框架里进行 AJAX 调用的方法的源码。想象一
下使用纯 JavaScript 创建一个复杂的控件,例如 grid ,分页,排序,过滤,分组,
可编辑字段等等。Ext JS 不需要你自己来做这些工作。这里其实是废话,没有谁
闲的蛋疼重复造轮子。但是其他框架一定没有 Ext JS 这种一站式的支持。
访问 DOM 变得容易
普通的纯 JavaScript 里,你可以访问 DOM,但是这有点复杂。使用 Ext JS 就会
很容易查找 DOM。当然使用 jquery 的人肯定不信服,还能比 jquery 查找 DOM
更方便吗?我也常用 jquery ,这里我可以说 Ext JS 相较 jquery 查找 DOM 不逞多
让。
客户端路由
在 web 应用里,URL 映射到 web 页面的路由方式背后有一系列的逻辑。路由可以
在服务端也可以在客户端。通常客户端路由都是用单页式应用实现的。Single-
Page Application(SPA)。
支持无障碍访问
无障碍访问特性意味着这个应用程序的内容必须是可以方便的让视力受损的人借助
辅助设备访问(例如屏幕阅读器)。 而开发一个应用程序能够很好的支持无障碍特性
是非常困难的。这里 Ext JS 已经为你做了。
在美国,如果你开发的软件供联邦和州政府职员使用,在绝大多数情况下,你需要
确保你的程序是支持无障碍访问特性的。这一点,很少 JavaScript 框架能对无障
碍访问特性有较好的支持。而 Ext JS 提供了完美的无障碍访问支持。
World Wide Web Consortium(W3C)已经创立了一个名为 WAI-ARIA(Web
Accessibility Initiative – Accessible Rich Internet Applications) 的技术规范。
WAI-ARIA, 是 Web Accessibility Initiative – Accessible Rich Internet
Applications 的缩写,指无障碍网页应用技术。她主要解决的一个问题:让残
障人士能无障碍地访问网页上的动态内容。
这种规范方式使残疾人也能无障碍访问 web 应用。 Ext JS 对此具有良好的支持,
并且所有的 控件/部件 都可以支持,不需要你做任何额外的编码。
介绍 Ext JS
Ext JS 作为一个一站式的开发富 UI 应用的框架,它提供支持 MVC,MVVM, 双向绑
定,跨浏览器兼容,路由功能,一组广泛的丰富的 UI 组件,图表等等。对于框架
中所有的 API , Ext JS 还拥有一个非常优秀的文档。Ext JS 最初的建立是由
Jack Slocum 开发的,做为 YUI 的一个附加扩展库使用,现在则是成为 Sencha
公司的产品。
在 Ext JS 中,你写的代码基本上就是 JavaScript,因为你不需要写 HTML。Ext
JS 附带一组庞大的丰富的 UI 组件,这在你的开发过程中会节约你相当多的时间。
本书中,所有的样例代码和示例项目代码将使用最新的 Ext JS Version 6,但是大
多数代码是兼容以前的 Ext JS 5 的。Ext JS 5 和 Ext JS 6 的大多数概念是相同的。
所以如果你在使用 Ext JS 5,你仍然可以从这本书中受益不少。但是请记住这本书
的代码将不会运行在 Ext JS 5 并且可能需要做一些小修改才能运行在 Ext JS 5。
在 Ext JS 6 中最重要的变化是它合并了两个框架:Ext JS 和 Sencha Touch 合并
成为了一个框架。Ext JS 6 还带来了一个新的 SASS 编译器叫 Fashion,以及 3D
图表的改进等等。
要明白为什么会发生合并 Ext JS 和 Sencha Touch , 我们需要回顾一下。
Sencha Touch 是一个独立的产品,专用于为移动设备和平板电脑创建可支持触摸
的应用,它利用硬件加速技术为移动设备提供高性能的 UI 组件。
Ext JS 4 和 Ext JS 5 主要用于开发桌面级的 web 应用。 如果你已经在 Ext JS 5
或 Ext JS 4 创建了用于桌面的 web 应用,这仍然可以在移动设备和平板电脑上运
行,但是它将不支持一些特定的触摸功能,并且不能利用硬件加速为移动设备提供
高性能 UI 组件。所以为了更好的支持移动设备,Sencha 开发人员被告知要使用
Sencha Touch。
使用 Sencha Touch 有很多优势。 在 Sencha Touch 编写的应用将具备移动平台
本地应用一样的外观,并且性能将更好。然而许多开发人员有一个抱怨,因为他们
被迫保持两套相同的应用程序的代码库。
尽管 Sencha Touch 和 Ext JS 有很多差异是完全不同的产品,但他们的概念和思
想的框架非常相似,如果你会用 Ext JS,那么学习 Sencha Touch 也非常容易。
长期以来,许多 Ext JS 和 Sencha Touch 用户问为什么不把两个产品合二为一使
Ext JS 能够带触摸功能。在 Ext JS 6 中,Sencha 决定将这两个产品合并到一个单
一的产品。
现在,在 Ext JS 6 你仍然可以维护一套独立的代码。而要 Sencha Touch 和 Ext
JS 6 两者兼存,有些视图的代码你可能需要单独的编写,但是大部分代码都是共
享的。
在 Ext JS 6 合并后将两者通用的代码做为核心(两者公用一个核心),并且引入了一
个 toolkit(工具箱) 的概念。toolkit 是一个可视化组件的包,例如 button,panel 等
等。Ext JS 6 有两个工具包:classic(古典) 和 modern(现代)。原来的 Ext JS 的可
视化组件放在 classic 工具包,原来的 Sencha Touch 的可视化组件则放在
modern 工具包。
在 Ext JS 6 中选择你想使用的 toolkit(工具包)很简单,如果你正在开发的程序只是
针对移动设备的,你可以选择 modern,如果你只用于桌面那么你可以选择
classic。默认则是通用的,通用的应用你在桌面端访问 Ext JS 6 应用,就会自动
展现 classic 风格,如果用移动设备或平板电脑访问则自动展现 modern 风格。
通用应用
如果你的应用要同时支持桌面和移动设备,在 Ext JS 6 你可以创建一个通用的应
用,这时候将会同时应用两个工具包。你可以添加以下的构建配置(这个配置在程
序根目录 app.json 配置文件中,详细的后面会讲到),来指定构建使用的工具包和
主题:
这里就很简单了,如果你只想用 那么就注释 的配置即可。
!
"
剩余63页未读,继续阅读
不_知_不_觉
- 粉丝: 5
- 资源: 9
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- ExcelVBA中的Range和Cells用法说明.pdf
- 基于单片机的电梯控制模型设计.doc
- 主成分分析和因子分析.pptx
- 共享笔记服务系统论文.doc
- 基于数据治理体系的数据中台实践分享.pptx
- 变压器的铭牌和额定值.pptx
- 计算机网络课程设计报告--用winsock设计Ping应用程序.doc
- 高电压技术课件:第03章 液体和固体介质的电气特性.pdf
- Oracle商务智能精华介绍.pptx
- 基于单片机的输液滴速控制系统设计文档.doc
- dw考试题 5套.pdf
- 学生档案管理系统详细设计说明书.doc
- 操作系统PPT课件.pptx
- 智慧路边停车管理系统方案.pptx
- 【企业内控系列】企业内部控制之人力资源管理控制(17页).doc
- 温度传感器分类与特点.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论3