【精品】ExtJS交流精品ppt课件.ppt
ExtJS交流2023/3/14【可编辑】2提纲ExtJS简介JavaScript基础数组对象Json复杂数组动态特性使用Ext第一个Ext程序3提纲常用组件介绍ViewportPanelWindowMessageExt结构和功能Layout事件4提纲FormGrid数据存储Ext Core学习方法和参考资料提问5ExtJS简介简介678ExtJSExtJS一种以Javascript为基础开发的框架(Framework)，目的是加强Javascript不足之处，简化网站开发的时间与成本，尤其是在强化用户界面与画面美观上。9JavaScript基础10数组初始化var a=new Array();var a=;(var a=9,8,7,6;)增加元素a.push(item1);aa.length=item1;常用属性和方法a.lengtha.join();a.join(-);11Javascript面向对象定义function f()/定义类var f=/直接定义对象成员定义f.prototype.field1=field1;f.prototype.method1=function()alert(this.field1);var f=field1:field1,method1:function()alert(this.field1);12JSon定义var o=v1:value1,v2:value2访问o.v1o“v1”13复杂数组Javascript数组中的元素是没有严格限制的，同一个数组中可以放入任何类型的数据元素，无论数值、布尔值、字符串、对象、函数，甚至数组。14动态特性在运行时可以改变对象结构：新的属性和方法可以被引进，已有的属性和方法可以被删除等结构上的变化。新增成员var o=;o.f1=v1;o.m1=function()alert(this.f1);o.m1();删除成员delete o.f1;o.m1();15使用Ext引入文件ext-all.cssext-base.jsext-all.js本地化文件(ext-lang-zh_CN.js)第一个Ext程序Ext.onReady(function()Ext.Msg.alert(Hello,Hello World!););16常用组件介绍Viewport:把自己渲染到documet.body，并自动将自己调整到浏览器视口的大小，在窗口大小发生改变时自动管理。一个页面中只能有一个Viewport对象17常用组件介绍Panel:是一个具有特殊功能的容器，结构化的组件使它能够完美地为面向应用的用户界面创建板块。Panel包含顶部和底部工具栏，连同单独的头部、尾部、主体区域。18常用组件介绍Window:一个被设计用作程序窗口的特殊panel。默认情况下，window是浮动和可拖拽的，并且提供特殊的行为，如最大化、恢复的能力。19常用组件介绍MessageBox:工具类，用来产生不同风格的消息框。也可以使用Ext.Msg这个别名。注意:MessageBox是异步的。与常规的alert(它会挂起浏览器，不能执行其它脚本)不同，显示一个MessageBox不会导致代码停止执行。因为此原因，如果你的代码需要在用户对MessageBox作出反馈之后才执行，你必须使用一个回调函数。20Ext包结构和功能对页面Dom的核心操作Js内置对象功能扩展Ajax功能简化丰富的页面组件事件管理创建各种简易的动画效果强大的模板机制完善的页面样式管理统一的数据管理方式完整的布局种类21布局(Layout)absolute accordion anchor autoborder*card column*fit form*hbox menu table toolbar vbox 22事件Ext的事件包装并扩展了Javascript事件,针对不同组件提供了丰富的事件类型,同时允许自定义事件。为组件添加事件监听listener属性addListener/on方法23Form相关组件Ext包装了html form和其他表单录入标签使其和其他Ext组件风格,样式,事件处理统一起来,而且提供了许多有用的特性使Javascript 操作表单(form及录入标签)更加简单。24GridE xtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行 号、列汇总、单元格编辑等实用功能。ExtJS 中，表格 Grid必须包含列定义信息，并指定表格的数据存储器 Store。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由 Ext.data.Store 定义。25数据存储Store类封装了Record 对象的客户端缓存，它负责向GridPanel、ComboBox 或者DataView 这类组件提供数据输入。Store对象将使用配置 的DataProxy的实现类来加载数据。Store对象不知道Proxy返回的数据的格式是什么，Store对象使用它配置的 DataReader 的实现类从数据对象创建Record 实例。这些Record将被缓存，可以通过访问函数访问。26Ext Core是一款具有多项功能的轻型JavaScript库。作用:DOM操作、Ajax、事件、动画、模板、OO机制等的任务都有相应的支持。和ExtJS的关系:ext core是ExtJS的一个子集，功能限于页面DOM和Ajax操作的基本功能，不包含任何页面图形组件。参考:http:/ DOC看源码参考资料参考资料http:/
