ExtJS交流文件材料教学稿件.ppt

ExtJS交流 —— 技术支持组 关翔峰 2010年1月14日 提纲 ExtJS简介 JavaScript基础 数组 对象 Json 复杂数组 动态特性 使用Ext 第一个Ext程序 富客户端技术 丰富型互联网应用程序（Rich Internet applications，简称RIA）是一种具有近似于传统桌面应用软件系统功能和特性的网络应用系统。RIA系统最大的特点是将大部分处理任务都从用户界面端移植到客户端，仅保留一些必要数据与服务器端进行信息交互。 几种常见的RIA技术 Microsoft Silverlight Adobe Flex Sun JavaFX 基于Ajax的JS框架实现RIA ExtJS JQuery/JQuery UI Dojo … ExtJS ExtJS一种以Javascript为基础开发的框架(Framework)，目的是加强Javascript不足之处，简化网站开发的时间与成本，尤其是在强化用户界面与画面美观上。 JavaScript基础 数组 初始化 var a = new Array(); var a = [ ]; (var a = [9,8,7,6];) 增加元素 a.push(‘item1’); a[a.length] = ‘item1’; 常用属性和方法 a.length a.join(); a.join(‘-’); Javascript面向对象 定义 function f (){ } // 定义类 var f = { } // 直接定义对象 成员定义 totype.field1 = ‘field1’; totype.method1 = function() { alert(this.field1) }; var f = { field1 : ‘field1’, method1 : function() { alert(this.field1) } }; JSon 定义 var o = { v1 : ‘value1’, v2 : ‘value2’ } 访问 o.v1 o[“v1”] 常用组件介绍 Viewport:把自己渲染到documet.body，并自动将自己调整到浏览器视口的大小，在窗口大小发生改变时自动管理。 一个页面中只能有一个Viewport对象 常用组件介绍 Panel:是一个具有特殊功能的容器，结构化的组件使它能够完美地为面向应用的用户界面创建板块。 Panel包含顶部和底部工具栏，连同单独的头部、尾部、主体区域。 常用组件介绍 Window:一个被设计用作程序窗口的特殊panel。默认情况下，window是浮动和可拖拽的，并且提供特殊的行为，如最大化、恢复的能力。 常用组件介绍 MessageBox:工具类，用来产生不同风格的消息框。 也可以使用Ext.Msg这个别名。 注意:MessageBox是异步的。与常规的alert(它会挂起浏览器，不能执行其它脚本) 不同，显示一个MessageBox不会导致代码停止执行。因为此原因，如果你的代码需要在用户对MessageBox作出反馈之后才执行，你必须使用一个回调函数 。 Ext包结构和功能 对页面Dom的核心操作 Js内置对象功能扩展 Ajax功能简化 丰富的页面组件 事件管理 创建各种简易的动画效果 强大的模板机制 完善的页面样式管理 统一的数据管理方式 完整的布局种类 布局(Layout) absolute accordion anchor auto border * card column * fit form * hbox menu table toolbar vbox 事件 Ext的事件包装并扩展了Javascript事件,针对不同组件提供了丰富的事件类型,同时允许自定义事件。 为组件添加事件监听 listener属性 addListener / on方法 Form相关组件 Ext包装了html form和其他表单录入标签使其和其他Ext组件风格,样式,事件处理统一起来,而且提供了许多有用的特性使Javascript 操作表单(form及录入标签)更加简单。 Grid E xtJS 中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行 号 、列汇总、单元格编辑等实用功能。 ExtJS 中，表格 Grid必须包含列定义信息，并指定表格的数据存储器 Store 。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由 Ext.data.Store 定义。 数据存储 Store类封装了Record 对象的客户端缓存，它负责向GridPanel 、ComboBox 或者DataView 这类组件提供数据输入。 Store对象将使用配置 的