最新ExtJS交流(共30张PPT课件).pptx

《最新ExtJS交流(共30张PPT课件).pptx》由会员分享，可在线阅读，更多相关《最新ExtJS交流(共30张PPT课件).pptx（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、ExtJS交流交流(jioli) 技术支持组技术支持组 关翔峰关翔峰 2010 2010年年1 1月月1414日日第一页，共三十页。2提纲(tgng)ExtJS简介JavaScript基础 数组 对象 Json 复杂数组 动态特性(txng)使用Ext 第一个Ext程序第二页，共三十页。3提纲(tgng)常用组件介绍 Viewport Panel Window MessageExt结构和功能(gngnng)Layout事件第三页，共三十页。4提纲(tgng)FormGrid数据(shj)存储Ext Core学习方法和参考资料提问第四页，共三十页。5ExtJS简介简介(jin ji)第五页，共三

2、十页。6富客户端技术(jsh)丰富型互联网应用程序丰富型互联网应用程序（Rich Internet applications，简称RIA）是一种具有(jyu)近似于传统桌面应用软件系统功能和特性的网络应用系统。RIA系统最大的特点是将大部分处理任务都从用户界面端移植到客户端，仅保留一些必要数据与服务器端进行信息交互。第六页，共三十页。7几种(j zhn)常见的RIA技术Microsoft SilverlightAdobe FlexSun JavaFX基于Ajax的JS框架(kun ji)实现RIA ExtJS JQuery/JQuery UI Dojo 第七页，共三十页。8ExtJSExtJS

3、一种以Javascript为基础开发的框架(Framework)，目的是加强Javascript不足之处，简化网站(wn zhn)开发的时间与成本，尤其是在强化用户界面与画面美观上。 第八页，共三十页。9JavaScript基础(jch)第九页，共三十页。10数组初始化var a = new Array();var a = ; (var a = 9,8,7,6;)增加元素(yun s)a.push(item1);aa.length = item1;常用属性和方法a.lengtha.join();a.join(-);第十页，共三十页。11Javascript面向对象定义function f ()

4、 / 定义类var f = / 直接(zhji)定义对象成员定义f.prototype.field1 = field1;f.prototype.method1 = function() alert(this.field1) ;var f = field1 : field1,method1 : function() alert(this.field1) ;第十一页，共三十页。12JSon定义(dngy)var o = v1 : value1,v2 : value2访问o.v1o“v1”第十二页，共三十页。13复杂(fz)数组Javascript数组中的元素是没有严格(yng)限制的，同一个数组中

5、可以放入任何类型的数据元素，无论数值、布尔值、字符串、对象、函数，甚至数组。第十三页，共三十页。14动态(dngti)特性在运行时可以改变对象结构：新的属性和方法可以被引进，已有的属性和方法可以被删除(shnch)等结构上的变化。新增成员var o = ;o.f1 = v1;o.m1 = function() alert(this.f1) ;o.m1();删除成员delete o.f1;o.m1();第十四页，共三十页。15使用(shyng)Ext引入文件(wnjin) ext-all.cssext-base.jsext-all.js本地化文件(ext-lang-zh_CN.js)第一个Ext

6、程序Ext.onReady(function() Ext.Msg.alert(Hello,Hello World!););第十五页，共三十页。16常用组件(z jin)介绍Viewport:把自己渲染到documet.body，并自动(zdng)将自己调整到浏览器视口的大小，在窗口大小发生改变时自动(zdng)管理。 一个页面中只能有一个Viewport对象第十六页，共三十页。17常用(chn yn)组件介绍Panel:是一个具有特殊功能的容器，结构化的组件使它能够完美地为面向应用的用户界面创建板块(bn kui)。 Panel包含顶部和底部工具栏，连同单独的头部、尾部、主体区域。 第十七页，

7、共三十页。18常用组件(z jin)介绍Window:一个被设计用作程序窗口的特殊panel。默认情况下，window是浮动和可拖拽(tu zhui)的，并且提供特殊的行为，如最大化、恢复的能力。第十八页，共三十页。19常用组件(z jin)介绍MessageBox:工具类，用来产生不同风格的消息框。 也可以使用Ext.Msg这个别名。 注意:MessageBox是异步的。与常规的alert(它会挂起浏览器，不能执行其它脚本) 不同，显示一个MessageBox不会导致代码停止执行。因为此原因，如果你的代码需要在用户对MessageBox作出反馈之后(zhhu)才执行，你必须使用一个回调函数

8、。 第十九页，共三十页。20Ext包结构(jigu)和功能对页面Dom的核心操作(cozu)Js内置对象功能扩展Ajax功能简化丰富的页面组件事件管理创建各种简易的动画效果强大的模板机制完善的页面样式管理统一的数据管理方式完整的布局种类第二十页，共三十页。21布局(bj)(Layout)absolute accordion anchor autoborder *card column *fit form *hbox menu table toolbar vbox 第二十一页，共三十页。22事件(shjin)Ext的事件(shjin)包装并扩展了Javascript事件,针对不同组件提供了丰富的

9、事件类型,同时允许自定义事件。为组件添加事件监听 listener属性 addListener / on方法第二十二页，共三十页。23Form相关(xinggun)组件Ext包装了html form和其他表单录入标签使其和其他Ext组件(z jin)风格,样式,事件处理统一起来,而且提供了许多有用的特性使Javascript 操作表单(form及录入标签)更加简单。第二十三页，共三十页。24GridE xtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行 号 、列汇总(huzng)、单元格编辑等实用功能。ExtJS 中，表格 Grid必须包含列定义信息，并指定表格的数

10、据存储器 Store 。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由 Ext.data.Store 定义。第二十四页，共三十页。25数据(shj)存储Store类封装了Record 对象的客户端缓存，它负责向GridPanel 、ComboBox 或者DataView 这类组件提供数据输入。 Store对象将使用配置 的DataProxy的实现类来加载数据。 Store对象不知道Proxy返回的数据的格式是什么，Store对象使用它配置的 DataReader 的实现类从数据对象创建Record 实例。这些Record将被缓存，可以(ky)通过访问函数访

11、问。第二十五页，共三十页。26Ext Core是一款具有多项功能的轻型JavaScript库。作用:DOM操作、Ajax、事件、动画、模板、OO机制等的任务都有相应的支持(zhch)。和ExtJS的关系:ext core是ExtJS的一个子集，功能限于页面DOM和Ajax操作的基本功能，不包含任何页面图形组件。参考:http:/ DOC看源码参考资料参考资料 http:/ http:/www.json.org/ http:/ xie)！第二十九页，共三十页。内容(nirng)总结ExtJS交流。丰富型互联网应用程序（Rich Internet applications，简称RIA）是一种具有近似于传统(chuntng)桌面应用软件系统功能和特性的网络应用系统。本地化文件(ext-lang-zh_CN.js)。Ext.onReady(function()。Ext.Msg.alert(Hello,Hello World。一个页面中只能有一个Viewport对象。谢谢第三十页，共三十页。