Ext开发教程--测试版001.ppt

ExtJs开发实用教程 主讲 项目部贾东坡 Ext发展史 1 第一只 出海 的YUI Ext只是作者Jack打算对Yahoo UserInterface YUI 库进行自定义的扩展 但后来一度风头盖过其父辈YUI 足以说明大家对它的热情 很多人把它投入项目 但并不十分了解它 分析人士打了一个比喻 就好比尚未谋面 并不了解一个人的家庭 教育 品行等背景 只因为他有一副精致漂亮的外观 就对其陷入了疯狂的倾慕之中 2 在2006年初 JackSlocum 杰克 斯洛克姆 就一套公用设施扩建为YUI库而工作 这些扩展很快组织成一个独立的库代码并以 yul ext 的名义下发布 3 在2006年秋天 Jack发行了版本为0 33的yui ext 而最终被证明为最后版本的代码 在年底之前 这个库已大受欢迎 名字被简化为Ext 反映了它作为一个框架的成熟和独立 4 在2007年4月1日 发布1 0正式版 该公司成立于2007年初5 官方在2009年4月14 16日的首次ExtConference中发布了Ext的3 0RC版本 6 2009年5月4日 Ext的3 0版本发布 7 2010年1月8日 ExtJS已发展涵盖美国 日本 中国 法国 德国等全球范围的用户 现在的版本为Ext 4 0 78 2010年6月15日 当开发者访问著名的JavaScript库ExtJS网站 会发现自己被重导向到另一个不熟悉的网址和界面sencha 原来 ExtJS项目已经与触摸屏代码库项目jQTouch和SVG处理库Raphael合并 后两个项目的创始人DavidKaneda和DmitryBaranovskiy也将加入ExtJS 此举是ExtJS为了应对HTML5等新趋势 加强丰富图形和触摸屏功能的重要举措 9 2011年4月22日 Extjs4 0正式发布10 2012年3月14日 Extjs4 1正式发布 SenchaTouch SenchaTouch是专门用于移动应用开发的JavaScript框架 也是第一个基于HTML5的移动应用框架 其前身是Ext 使用SenchaTouch 开发者可以构建在iPhone Android和BlackBerrytouch等设备上运行的移动web应用 其效果看起来如同本地应用目前SenchaTouch已经成为构建移动HTML5应用的领先框架 Ext简介 Ext简介Ext是一个Ajax框架 用于在客户端创建丰富多彩的web应用程序界面 是在Yahoo UI的基础上发展而来的 extjs4 1下载地址 EXTJS属于AJAX 基于JavaScript语言 基于JavaSwing的MVC架构 支持组件化 模块化设计 提供 本地数据源 的支持 完成与服务端的交互机制是最有可能拥有大规模可视化开发环境的Ajax技术 ExtJs的基本概念 什么是ExtJs 1 ExtJS可以用来开发RIA也即富客户端的AJAX应用 是一个用javascript写的 主要用于创建前端用户界面 是一个与后台技术无关的前端ajax框架 因此 可以把ExtJS用在 Net Java Php等各种开发语言开发的应用中 ExtJs最开始基于YUI技术 由开发人员JackSlocum开发 通过参考JavaSwing等机制来组织可视化组件 无论从UI界面上CSS样式的应用 到数据解析上的异常处理 都可算是一款不可多得的JavaScript客户端技术的精品 2 Ext的UI组件模型和开发理念脱胎 成型于Yahoo组件库YUI和Java平台上Swing两者 并为开发者屏蔽了大量浏览器方面的处理 相对来说 EXT要比开发者直接针对DOM W3C对象模型开发UI组件轻松 RIA应用及富客户端技术 未来的应用程序 将是富客户端应用程序的天下 RIA简介富因特网应用程序 RichInternetApplications RIA 集成桌面应用的交互性和传统Web应用的部署灵活性 SaaS是以后软件发展的一个趋势 而RIA从技术上推进SaaS RIA开发必备三个要素 富客户端技术 服务器技术和开发工具 几种富客户端技术MacromediaFlex Adobe公司的RIA解决方案 在Flash运行时环境中运行 HXML JavaFx Sun的RIA解决方案 在Java虚拟机 上运行 VRML WPF SilverLight Microsoft的RIA解决方案 在浏览器端的 N 运行时插件中运行 XAML Ajax 使用标准W3C技术 不需要额外的运行环境支持 如Backbase及Ext RIA 富互联网应用 RIA具有的桌面应用程序的特点包括 在消息确认和格式编排方面提供互动用户界面 在无刷新页面之下提供快捷的界面响应时间 提供通用的用户界面特性如拖放式以及在线和离线操作能力 客户机在RIA中的作用不仅是展示页面 它可以在幕后与用户请求异步地进行计算 传送和检索数据 显示集成的用户界面和综合使用声音和图像 这一切都可以在不依靠客户机连接的服务器或后端的情况下进行 对于企业来说 部署RIA的好处在于 1 RIA可以继续使用现有的应用程序模型 包括J2EE和 NET 因而无需大规模替换现有的Web应用程序2 RIA可以帮助企业提供多元化的重要业务效益 包括提高销量 提高品牌忠诚度 延长网站逗留时间 较频繁的重复访问 减少带宽成本等 二 Ajax技术 Ajax概念Ajax不是一项技术 它其实是几项技术 每项技术自身都很繁荣 它们以强有力的全新方式结合起来 Html xhtml DOM CSS XML XSLT XMLHttpRequest javascript 常用Ajax框架Prototype jsYUIJQueryDojoEcho2Ext 选择Ajax的理由 Ajax虽然不是最新的WEB开发技术但是最后一个支持浏览器的WEB开发技术 因为无论是Sliverlight 还是Flex其原理已经不再需要浏览器支持了 而浏览器发展到现在 不可能短期内放弃 Ajax大都用JavaScript JavaScript已经历经十年发展 已经拥有庞大的应用队伍 其继续发展的可能性还是有的 让我们开始ExtJS之旅 认识ExtJS开发包ExtJS开发包可以从网站下载到最新ExtJS3 0版本 开发包中含有7个文件子包和8个文件 如图 adapter放置的是核心代码与底层库的适配器 air包含了ExtJS以Adobeair进行改进后的代码库 还有以该代码库实现的任务管理实例 build目录放置ExtJS内核文件拆分压缩成的若干库文件 docs放置ExtJSAPI文档examples里面是ExtJS官方演示例子resource中是各种图片与CSS文件source中是ExtJS的源文件 changes html文件是版本修正列表文件 ext all js文件是ExtJS的核心库文件 必须要引入 ext all debug js文件是ext all js的调试版 调试的使用使用 ext core js文件是ExtJS的核心库文件 必须要引入 ext core debug js文件在调试ext core js文件时使用 include oder txt文件对使用不同底层库在引入JS文件上的顺序说明 license txt文件是ExtJS的使用许可文件 也从HelloWorld开始 对于ExtJS的学习可以从HelloWorld开始 熟悉其开发与运行过程 ExtJS只是一套用JavaScipt实现界面的组件 所以在没有与服务器进行数据交换的情况下 并不需要服务器的支持 HelloWorld ExtJS2 HelloWorldExt onReady function Ext MessageBox alert HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld ExtJs基本概念 组件类方法事件配置选项属性命名空间 ExtJs 组件component 能够以图形化形式呈现界面的类 其中还可以分为容器组件与元件组件 容器组件 能够包含其它容器组件或者元件组件的类 其是进行单元化组件开发的基础 元件组件 能图形化形式表现一个片面功能的组件 其不仅在实现了原有传统WEB程序的现在组件 面且还扩展了许多实用的组件 如刻度器 日历 树形列表等 返回 ExtJs 类class 提供功能的非图形的类 它们为图形类提供了有力的支持 按其功能可分为 数据支持类 data 播放支持类 dd 布局支持类 layout 本地状态存储支持类 state 实用工具类 util 密封灰 不能被扩展的类 原型类 扩展了JavaScript标准类库中的类 返回 ExtJs 方法mothod 作为类的功能体现 能够产生改变对象本身产生变化的直接因素方法按访问形式可分为公有方法与私有方法 但由于javaScript从原理上根本不支持这种结构 因此在ExtJs中 私有与公有方法完全凭借着用户自觉 没有像Java那样的强制性 返回 ExtJs 事件event 由类定义的 并且可以在类对象自身状态发生改变时触发 只有被定阅的事件才会有效 如果不需要此事件 应该进行退定 增强程序的执行效率 返回 ExtJs 配置选项configoption 用心初始化一个ExtJs类对象的手段注意 配置选项并不一定是属性 就算是属性 也有可能出现属性返回的类型与你当初指定的配置选项类型不一致的情况 返回 ExtJs 属性property 能够在运行程序期间 能够被访问 用以了解当前类对象的状态 在实际的编程中 ExtJs的属性设置比较差劲 需要通过了解其源代码 才能了解各种实用属性的用处 返回 ExtJs 命名空间namespace 能够将编写好的ExtJs类进行有效组织的手段 这个也是ExtJs能称之为优秀AJAX框架的特征之一 返回 ExtJs在面向对象方面的支持 支持命名空间支持类实例属性支持类实例方法支持类静态方法支持构造方法支持类继承支持类实例方法重写支持命名空间别名支持类别名支持事件队列 支持命名空间 定义 对于类的组织定义方式 代码举例 Ext namespace Ext tarena Java代码对照 PackageExt tarena 返回 支持类实例属性 定义 对于一个实例的特征描述 代码举例 prototype是指函数原型 Ext apply Ext tarena Person prototype name 齐达内 返回 支持类实例方法 定义 一个对象所能具有的功能与动作 代码举例 Print function 方法名print 方法体如下 Alert String format 姓名 0 性别 1 this name this sex Java代码对照 Publvoidprint System out print 姓名 s 性别 s this name this sex 返回 支持类静态方法 定义 在一个类级别上共享的方法 代码举例 Ext tarena Person print function name sex Var person newExt tarena Person person name name person sex sex person print Java代码对照 Publicvoidprint System out println 姓名 0 性别 1 this name this sex 支持构造方法 定义 在初始化一个对象的同时执行的方法 代码举例 Ext tarena Person function cfg Ext apply this cfg Java代码对照 PublicPerson Stringname intage This name name This age age 支持类继承 定义 对于类的一种扩展形式 代码举例 Ext extend Ext tarena Studnet Ext tarena Person Job 学生 Java代码对照 ClassStudentextendssPerson PublicStudent Stirngname Stringsex Super name sex this setJob 学生 支持类实例方法重写 定义 子类在继承父类时对其已经存在的方法进行重新定义 代码举例 Teacher继承Person 并重写它的print方法 Ext extend Ext tarena Teacher Ext tarena Person Print function Alert String format 0 是一位 1 老师 this name this sex 支持命名空间别名 定义 对于命名空间的别称代码举例 Dt Ext tarena 遵守规则 短写 首字母大写 其后的字母小写 支持类别名 定义 对于类的别称代码举例 PN Ext tarena Person规范 必须都要大写 支持事件队列 事件定义 对于外界影响的反应 在ExtJs还支持事件队列模式 由Ext util Observable类支持 Ext util是命名空间 Observable是个类 这个类是放在这个Ext util下的 是工具类 不是说只有JavaSwing有事件 只要对一个对象产生了响应 就是事件 它会让组件化更具