ExtJS交流PPT.ppt

* * ExtJS交流 —— 技术支持组 关翔峰 2010年1月14日 提纲 ExtJS简介 JavaScript基础 数组 对象 Json 复杂数组 动态特性 使用Ext 第一个Ext程序 提纲 常用组件介绍 Viewport Panel Window Message Ext结构和功能 Layout 事件 提纲 Form Grid 数据存储 Ext Core 学习方法和参考资料 提问 ExtJS简介 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 = { } // 直接定义对象 成员定义 f.prototype.field1 = ‘field1’; f.prototype.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”] 复杂数组 Javascript数组中的元素是没有严格限制的，同一个数组中可以放入任何类型的数据元素，无论数值、布尔值、字符串、对象、函数，甚至数组。 动态特性 在运行时可以改变对象结构：新的属性和方法可以被引进，已有的属性和方法可以被删除等结构上的变化。 新增成员 var o = { }; o.f1 = v1; o.m1 = function() { alert(this.f1) }; o.m1(); 删除成员 delete o.f1; o.m1(); 使用Ext 引入文件 ext-all.css ext-base.js ext-all.js 本地化文件(ext-lang-zh_CN.js) 第一个Ext程序 Ext.onReady(function(){ Ext.Msg.alert(Hello,Hello World!); }); 常用组件介绍 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 * * * *