ExtJS开发框架入门.ppt

Ext JS开发框架入门 框架简介、环境搭建、helloWord示例 EXT核心组件应用 Ext框架 EXT框架基础 Ext 框架简介 怎样搭建EXT运行环境及开发环境 helloWord示例程序 框架简介、环境搭建及HelloWord Ext框架简介 v什么是ext？ Ext是一个Ajax框架，可以用来开发带有华丽外观的 富客户端应用，使得我们的b/s应用更加具有活力及 生命力，提高用户体验。 Ext是一个用javascript编写，与后台技术无关的前 端ajax框架。因此，可以把Ext用在.Net、Java、 Php等各种开发语言开发的应用中。 Ext最新版本是ext3.2 Ext框架简介 vExt提供一系列的对象类，这些基本 上都是用于处理WEB页面控件的。 vExt的发布包括三个方面的内容： API参考手册、示例程序及开发包 。 Ext框架简介 vEXT API参考手册 Ext框架简介 v示例程序 Ext示例程序包共包括十二大类近100示例程序 。 Ext框架简介 v开发包 vadapter ：负责将里面提供第三方底层库（包括 Ext自带的底层库）映射为Ext所支持的底层库。 vbuild ：压缩后的ext全部源码(里面分类存放)。 vdocs ： API帮助文档。 vexmaples：提供使用ExtJs技术做出的小实例。 vresources：Ext UI资源文件目录，如CSS、图片 文件都存放在这里面。 vsource ：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。 vext-all.js ：压缩后的Ext全部源码。 vext-all-debug.js ：无压缩的Ext全部的源码(用于 调试)。 vext-core.js ：压缩后的Ext的核心组件，包括 sources/core下的所有类。 vext-core-debug.js ：无压缩Ext的核心组件，包括 sources/core下的所有类。 Ext框架简介 怎样搭建EXT运行环境及开发环境 开发环境 把Ext的开发包直接复制到WEB工程的目录下 helloWord示例程序 v新建HTML文件并在页面中引入ExtJS的样式及 ExtJS库文件 v样式文件为resources/css/ext-all.css v库文件主要包含两个：adapter/ext/ext-base.js及 ext-all.js v其中ext-base.js是框架基础库，ext-all.js是extjs的 核心库。 helloWord示例程序 vhelloWord在HTML直接嵌入代码实现 Ext.onReady(function() Ext.Msg.alert(helloWord,Hello Word!); ); helloWord示例程序 Ext类库简介 Ext框架基础及核心简介 Ext组件简介 Ext入门基础 Ext类库简介 vExtJS 由一系列的类库组成，一旦页面成功加载 了ExtJS 库后，我们就可以在页面中调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由 以下几部分组成： v底层API(core) v控件(widgets) v实用工具(Utils) Ext类库简介 v底层API(core)：底层API 中提供了对DOM 操作 、查询的封装、事件处理、DOM 查询器等基础 的功能。其它控件都是建立在这些底层api 的基 础上，底层api 位于源代码目录的core 子目录中 ，包括DomHelper.js、Element.js 等文件。 Ext类库简介 v控件(widgets)：控件是指可以直接在页面中创建 的可视化组件，比如面板、选项板、表格、树、 窗口、菜单、工具栏、按钮等等，在我们的应用 程序中可以直接通过应用这些控件来实现友好、 交互性强的应用程序的UI。控件位于源代码目录 的widgets 子目录中。 Ext类库简介 v实用工具Utils：Ext 提供了很多的实用工具，可 以方便我们实现如数据内容格式化、JSON数据 解码或反解码、对Date、Array、发送Ajax 请求 、Cookie 管理、CSS 管理等扩展等功能 Ext入门基础 尺寸 Ext.getDom(“hello“); Ext.getDom(e); Ext.getDom(e.dom); ); v /Html页面中包含一个id为hello的div，代码如下： aaa v 在上面的代码中，Ext.getDom(“hello“)、Ext.getDom(e)、 Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点 对象。 Ext中 get、getDom、getCmp的区别 Ext入门基础 v get方法中只有一个参数，这个参数是混合参数，可以是 DOM节点的id、也可以是一个Element、或者是一个DOM 节点对象等。 v get方法其实是Ext.Element.get的简写形式。 v Ext.onReady(function() var e=new Ext.Element(“hello“); Ext.get(“hello“); Ext.get(document.getElementById(“hello“); Ext.get(e); ); v /Html页面中包含一个id为hello的div，代码如下： aaa v Ext.get(“hello“)、 Ext.get(document.getElementById(“hello“)、Ext.get(e) 等三个方法都可以得到一个与DOM节点hello对应的Ext元 素。 Ext中 get、getDom、getCmp的区别 Ext入门基础 v getCmp方法用来获得一个Ext组件，也就是一个已经在页 面中初始化了的Component或其子类的对象，getCmp方 法中只有一个参数，也就是组件的id。 v getCmp方法其实是Ext.ComponentMgr.get方法的简写形 式。 v Ext.onReady(function() var myPanel=new Ext.Panel( id:“myFirstPanel”, title:“旧的标题“, renderTo:“hello“, width:300, height:200 ); Ext.getCmp(“ myFirstPanel “).setTitle(“新的标题“); ); v /Html页面中包含一个id为hello的div，代码如下： aaa v 我们使用Ext.getCmp(“myFirstPanel“).来得到id为 myFirstPanel的组件，并调用其setTitle方法来设置该面板 的标题 Ext中 get、getDom、getCmp的区别 vExt.Element占Ext Core库的篇幅很大，其中方法 就占据了大部份。因此我们将这些方法可分为下 面几类： v DOM查询或遍历（如query、select、findParent） v CSS（如setStyle、addClass） v DOM操控（如createChild、remove） v 方位、尺寸（如getHeight、getWidth） Ext入门基础 DOM的增删改查 DOM查询 v 获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 v Ext.get(elId).next(); v 类似的还有: v Ext.get(elId).prev();/上一个侧边节点 v Ext.get(elId).first();/第一个节点 v Ext.get(elId).last();/最后一个节点 v Ext.get(elId).parent();/父节点 /等等 v 比如要获取页面上所有的p标签,则可以使用: v var ps = Ext.select(p); v 这样你就可以对所要获取的元素进行操作了,select()方法返回的是 Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的元素进 行遍历: v ps.each(function(el) v el.highlight();/高亮 v ); v 当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于 CompositeElement对象上,如: v ps.highlight();/select方法返回的结果可直接如同Element般地操作 v 或是: v Ext.select(p).highlight(); v 当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的 XPath,HTML属性等 Ext入门基础 DOM查询-Ext.query与Ext.select v Ext.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等 查找出一个或多个元素。区别在于返回类型上。 v 分别是：query方法返回的是JavaScript标准的数组类型； v select方法返回的是CompositeElement类型，试比较： v alter(Ext.isArray(Ext.query(a.BigClass); /true v alter(Ext.query(a.BigClass).length);/里面包含的元素个数 v Ext.select(a.BigClass).each(function(i) i.dom.href = javescript:void(0);/ 找到所有带有BigClass样式的A元素 修改其链接 ); v CompositeElement类型属于Ext自定义的类型，简单地说是以一个 Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口， 也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元 素，均被视为一个单独元素处理。 v 它的用法和单个的Element对象一样。select方法返回的结果可直接如同 Element般地操作，一般比query方法常用。 Ext入门基础 DOM查询- DomQuery详解 v DomQuery是Ext Core提供的HTML或XML文档选择器，它支持大部分的CSS 3选择器规则，同时提供了一些自定义方式. v DomQuery主要有4种选择方式：元素标记、元素属性、伪对象、 CSS值 v 1.通过元素标记选择，主要有以下6种方法： v （1）*：选择任何元素。其使用方法请看下面代码。 v Ext.select(*); v （2）E：元素的标记为E。其使用方法请看下面代码。 v Ext.select(div); v （3）E F：选择包含在标记E中的标记F。其使用方法请看下面代码。 v Ext.select(div a);/将选择div下的a元素 v （4）EF：选择包含在标记E中的直接子标记F。其使用方法请看下面代码。 v Ext.select(diva);/将选择div下的直接子元素a v （5）E+F：选择所有紧接在元素E后的元素F。其使用方法请看下面代码。 v Ext.select(div+a);/将选择紧接在div下的元素a v （6）EF：选择所有紧接在元素E后的同层元素F。其使用方法请看下面代码 。 v Ext.select(diva);/将选择紧接在div下的同层元素a Ext入门基础 DOM查询- DomQuery详解 v 2.通过元素属性选择，主要有以下7种语法。 v （1）Efoo：选择带有属性foo的元素。其使用语法请看下面代码。 v Ext.select(divid);/选择有id属性的div元素 v （2）Efoo=bar：选择foo的属性值为bar的元素。其使用语法请看下面代码 。 v Ext.select(inputchecked=true);/选择checked属性值为true的元素 v （3）Efoo=bar：选择foo的属性值以bar开头的元素。其使用语法请看下面 代码。 v Ext.select(inputname=form1); /选择name属性值以form1开头的元素 v （4）Efoo$=bar：选择foo的属性值以bar结尾的元素。其使用语法请看下面 代码。 v Ext.select(inputname$=form1); /选择name属性值以form1结尾的元素 v （5）Efoo*=bar：选择foo的属性值包含字符串bar的元素。其使用语法请看 下面代码。 v Ext.select(inputname*=form1); /选择name属性值包含字符串form1的元素 v （6）Efoo%=2：选择foo的属性值能整除2的元素。其使用语法请看下面代 码。 v Ext.select(inputvalue%=2); /选择value属性值能整除2的元素 v （7）Efoo!=bar：选择foo的属性值不等于bar的元素。其使用语法请看下面 代码。 v Ext.select(inputname!=form1); /选择name属性值不等于form1的元素 Ext入门基础 DOM查询- DomQuery详解 v 3.通过伪对象选择，主要有以下18种语法。 v （1）Ext.select(ul li:first-child); /选择所有ul下的第一个li子节点 v （2）Ext.select(ul li:last-child); /选择所有ul下的最后一个li子节点 v （3）Ext.select(ul li:nth-child(2); /选择所有ul下的第2个li子节点 v （4）Ext.select(ul li:nth-child(odd); /选择所有ul下的奇数行li子节点 v （5）Ext.select(ul li:nth-child(evan); /选择所有ul下的偶数行li子节点 v （6）Ext.select(ul li:only-child); /选择所有ul下只有一个子节点的li节点 v （7）Ext.select(input:checked);/选择所有checked属性值为true的元素 v （8）Ext.select(input:first); /选择第一个input元素 v （9）Ext.select(input:last); /选择最后一个input元素 v （10）E:nth(n)：选择匹配的第n（n1）个元素E。其使用语法请看下面代码 。 v Ext.select(input:nth(2); /选择第2个input元素 v （11）E:odd：是语法“:nth-child(odd)”的简写。 v （12）E:evan：是语法“:nth-child(evan)”的简写。 v （13）Ext.select(div:contains(list); /选择innerHTML属性包含“list”的div v （14）Ext.select(div:nodeValue(test); /选择包含文本节点且值为“test”的 div v （15）Ext.select(input:not(:checked); /选择不包含checked属性的input v （16）Ext.select(div:has(p); /选择包含p的div v （17）Ext.select(div:next(p); /选择与包含p的div同层的下一个div v （18）Ext.select(div:prev(p); /选择与包含p的div同层的下一个div Ext入门基础 DOM查询- DomQuery详解 v 4.通过CSS值进行选择。主要有以下6种语法。 v （1）E:display=none：选择display值为none的元素E。其使用语法请看下 面代码。 v Ext.select(div:display=none); /选择display值为none的元素E v （2）Ext.select(div:display=none); /选择display值以none开始的元素E v （3）Ext.select(div:display$=none); /选择display值以none结尾的元素E v （4）Ext.select(div:display*=none); /选择display值包含字符串none的元 素E v （5）Ext.select(div:display%=none); /选择display值整除2的元素E v （6）Ext.select(div:display!=none); /选择display值不等于none的元素E v Domquery的语法可以单独使用，也可以组合在一起使用，例如以下代码： v Ext.select(div,span); /选择所有div元素与span元素 v /选择class为red，且是第1个子节点，display属性为none的div v Ext.select(div.red:first-childdisplay=none); v 如果没有指定选择器开始搜索的根节点，默认是从body节点开始，这就等于 每次都要做全文搜索，其性能可想而知，是相当低效的，因此，建议大家在 每次搜索时都指定搜索的根节点，减少搜索范围。设置搜索根节点的语法请 看下面代码。 v Ext.select(div,true, elId); / elId为根节点id v /下面这句与上面的效果是一样的 v Ext.get(elid).select(div); Ext入门基础 操纵CSS v Ext为我们提供了很多操纵CSS的方法. v addClass轻松地为一个元素添加样式： v Ext.get(elId).addClass(myCls); / 加入元素的myCls的样式 v radioClass添加一个或多个className到这个元素，并移除其所有侧边（ siblings）节点上的同名样式。 v Ext.get(elId).radioClass(myCls);/为元素添加myCls在所有侧边元素上删除 myCls样式 v removeClass移除元素身上一个或多个的CSS类。 v Ext.get(elId).removeClass(myCls); / 移除元素的样式 v toggleClass轮换（Toggles，两种状态中转换到一个状态）-添加或移除指 定的CSS类（如果已经存在的话便删除，否则就是新增加）。 v Ext.get(elId).toggleClass(myCls); / 加入(移除,再加入)样式 Ext.get(elId).toggleClass(myCls); v hasClass检查某个CSS类是否作用于这个元素身上。 v If (Ext.get(elId).hasClass(myCls) alert(是有样式的); v replaceClass在这个元素身上替换CSS类。 v Ext.get(elId).replaceClass(myClsA, myClsB); Ext入门基础 操纵CSS v getStyle返回该元素的统一化当前样式和计算样式。 v var color = Ext.get(elId).getStyle(color); v var zIndx = Ext.get(elId).getStyle(z-index); v var fntFmly = Ext.get(elId).getStyle(font-family); / . 等等 v setStyle设置元素的样式，也可以用一个对象参数包含多个样式。 v Ext.get(elId).setStyle(color, #FFFFFF); v Ext.get(elId).setStyle(z-index, 10); v Ext.get(elId).setStyle( display : block, overflow : hidden, cursor : pointer ); v Ext.get(elId).setStyle(color, #FFFFFF, true); / 带有动画的变换过程 v Ext.get(elId).setStyle(color, #FFFFFF, duration: .75); / 带有0.75秒动画 变换过程 v getColor为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都 被转换到标准六位十六进制的颜色。 v Ext.get(elId).getColor(background-color); v Ext.get(elId).getColor(color); v Ext.get(elId).getColor(border-color); / . 等等 v setOpacity设置元素的透明度。 v Ext.get(elId).setOpacity(.5); v Ext.get(elId).setOpacity(.45, true); / 动画 v Ext.get(elId).setOpacity(.45, duration: .5); / 附有半秒的动画过程 v clearOpacity清除这个元素的透明度设置。 v Ext.get(elId).clearOpacity(); Ext入门基础 操纵DOM v appendChild 把送入的元素归为这个元素的子元素。 v var el = Ext.get(elId1); v Ext.get(elId).appendChild(elId2); / elId2添加到elId里面 v Ext.get(elId).appendChild(el); / 参数还可以是:elId2,elId3, el.dom , Ext.select(div) v appendTo把这个元素添加到送入的元素里面。 v Ext.get(elId).appendTo(elId2);/ elId添加到elId2里面 v Replace 用于当前这个元素替换传入的元素。 v Ext.get(elId).replace(elId2); / elId去替换elId2 v replaceWith 用传入的元素替换这个元素 v Ext.get(elId).replaceWith(elId2); / elId2替换掉elId. v insertBefore 传入一个元素的参数，将其放置在当前元素之前的位置 v Ext.get(elId).insertBefore(elId2); v insertFirst 可以是插入一个元素，也可以是创建一个元素（要创建的话请使用 “DomHelper配置项对象”作为参数传入），这个元素将作为当前元素的第一个子元素出 现。 v Ext.get(elId).insertFirst(el); / 用DomHelper配置项创建新节点 v Ext.get(elId).insertFirst( v tag: p, v cls: myCls, v html: Hi I am the new first child v ); v remove从DOM里面移除当前元素，并从缓存中删除。 v Ext.get(elId).remove(); / elId在缓存和dom里面都没有 Ext入门基础 操纵DOM- - - -DOMHepler配置项 v 在上面的例子中，大家可能就注意到这样的语法： v .insertFirst( tag: p, html: Hi I am the new first child v ); v insertFirst方法的那个参数作用是什么呢？参数就是要创建的装饰元素(HTML 元素)在DomHelper 中是怎么表示的，也就是DomHelper的配置选项，其配 置项支持很多的HTML属性，html片断也行，至于html属性就可以是Dom节点 的很多属性了（css class、url、src、id等）。 v DomHelper配置可视作任何HTML元素的等价物. v DomHelper是专用于动态生成装饰元素的实用工具，已解决大多数浏览器之 间差别的问题，避免了原始操作DOM脚本的麻烦。对于HTML片断与 innerHTML的操作， DomHelper经充分考虑并在性能上有足够的优化。 v Ext.DomHelper是一个单例，因此无须实例化即可调用其静态方法: v markup, insertHtml , insertBefore , insertAfter , insertFirst , append ,overwrite v 例1 :Ext.DomHelper.append(my-div, tag: ul, cls: my-class); v 例2 :Ext.DomHelper.insertFirst(my-div, Hi); Ext入门基础 尺寸 / 设置高度为200px以默认配置进行动画 v / 设置高度为150px以自定义的配置进行动画 v Ext.get(elId).setHeight(150, v duration : .5, / 动画将会持续半秒 v callback: function() this.update(“结束“); / 动画过后改变其内容为“结束” v ); v getHeight/返回元素的偏移（offset）高度。 v getWidth/返回元素的偏移（offset）宽度。 v setHeight/设置元素的高度。 v setWidth/设置元素的宽度。 v getBorderWidth/返回指定边（side(s)）的padding宽度。 v getPadding/可以是t, l, r, b或是任何组合。传入lr的参数会得到 leftpadding+right padding。 v clip/保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 使用 unclip()来移除。 v unclip/在调用clip()之前，返回原始的裁剪部分（溢出的） Ext入门基础 定位 v 通过Ext Core定义的API能快速地采集元素位置的各方面数据，归纳为get的 或set的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数 的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object- literal configuration object），或即就是以个布尔型的true， v 表示这是默认的动画。 v set/getX v set/getY v set/getXY v set/getOffsetsTo/返回当前元素与送入元素的距离 v var elOffsets = Ext.get(elId).getOffsetsTo(anotherEl); v set/getLeft v set/getRight v set/getTop v set/getBottom v setLocation/无论这个元素如何定位，设置其在页面的坐标位置。 v clearPositioning/当文档加载后清除位置并复位到默认 v set/getPositioning/返回一个包含CSS定位信息的对象。有用的技巧：连同 setPostioning v 一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元 素 Ext入门基础 动画 v Ext Core里的Fx类是核心类库中最激动人心的一个类，它不是最重要的，却 是最实用的一个类 定义了一些常用的特效方法. v puff/渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会 被隐藏（visibility = hidden）， 但是块元素仍然会在 document对象中占据 空间。如果需要将元素从 DOM 树删除，则使用remove配置选项。 v / 默认 v el.puff(); v / 常见的配置选项及默认值 v el.puff( v easing: easeOut, v duration: .5, v remove: false, v useDisplay: false v ); v slideIn/slideOut/将元素滑入到视图中。 v fadeIn/fadeOut/将元素从透明渐变为不透明。 v switchOff/类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩。 v highlight/高亮 v pause/在任何后续的特效开始之前一次暂停。 v scale/以动画展示元素从开始的高度/宽度转换到结束的高度/宽度 v ghost/将元素从视图滑出并伴随着渐隐。 /等等 Ext入门基础 事件 v HTML元素的标准事件是指mouseover、mousedown、click、blur、focus、 change等能够直接对HTML元素发生的事件。在ExtJS中，这些事件的处理可 以用如下的代码： v 注册一个事件处理函数使用： v Ext.get(myElement).on(click, myHandler, myScope); myElement是要注册 的元素的ID，click是事件的名称（注意，和HTML元素中的声明onXXX不同 ，这里不需要on），myHandler是处理函数的函数名称，myScope是一个可 选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提 供这个参数，则是默认的window。 v 撤销一个事件处理函数： Ext.get(myElement).un(click, myHandler, myScope) 参数的意义同上。 v Ext.Element的on方法是addListener方法的简写. v 如果你想在一个元素上添加多个事件处理器可以这样一次搞定。 v var el= Ext.get(myElement); v el.on( click : fn: this.onMyClick, scope: this, delay: 100/延迟0.1秒执行,-高级事件功能 , mouseover : fn: this.onMyMouseOver, scope: this ); Ext入门基础 高级事件 v 事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容 ， v Ext Core在此方面提供了一系列的配置选项。 v 委托delegation v 减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基 v 本要义是： v 并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登 记 v 一次便可，这样产生了中央化的一个事件处理器，然后就有不断循环该事件 周 v 期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。 v v v v v v 我们想实现,点击不同的li,产生不同的效果.为此我们可能会这么做. v Ext.get(btn-edit).on(click, function(e,t) / 执行事件具体过程A); v Ext. get(btn-delete).on(click, function(e,t) / 执行事件具体过程B); v Ext. get(btn-cancel).on(click, function(e,t) / 执行事件具体过程C); Ext入门基础 高级事件 v 使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依 v 附的逻辑选择： v Ext.get(actions).on(click, function(e,t) /在div上登记一个事件 v switch(t.id) v case btn-edit: v / 处理特定元素的事件具体过程A v break; v case btn-delete: v / 处理特定元素的事件具体过程B v break; v case btn-cancel: v / 处理特定元素的事件具体过程C v break; v v ); v 基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一 定会被访问得到。这时就是执行我们所指定的switch指令，跳到对应匹配的 元素那部分代码。这样方法具备可伸缩性，因为我们只要维护一个函数就可 以控制那么多的元素的事件。 Ext入门基础 高级事件 v 是否一次性触发single v 在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后 加入一个下次移除本身的处理函数。 v el.on(click, function(e,t) v / 执行事件具体过程 v , this, v single: true / 触发一次后不会再执行事件了 v ); v 延时delay v 你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后 v 处理函数延时执行的时间。 v el.on(click, function(e,t) v / 执行事件具体过程 v , this, v delay: 1000/ 延迟事件，响应事件后开始计时（这里一秒） v ); v 缓冲buffer v 将上面代码的delay换成buffer/在缓冲时间内触发事件 无效. v 移除事件句柄removeAllListeners v el.removeAllListeners();/在该元素身上移除所有已加入的侦听器(事件)。 Ext入门基础 类编程-继承与重写 v JavaScript本身是基于原型的，这与普通基于类的编程语言相比，在实现继承 的机制上有较大的出入。JavaScript中创建一个新类那便是修改了某个对象原 型（prototype）的结果。Ext提供了许多简化这方面工作的函数。 v Ext支持以下类风格的编程行为：继承扩展（extend），重写（overrride）/直 接覆盖。这意味着开发者可以根据需求加入自己的行为，创建自己的类，或 者修改某些函数让其更加合适。 v extend与override v Ext.extend方法创建新一个类之定义。第一个参数是父类，第二个参数是属 性/函数的列表。第二个参数加入到对象的prototype中extend过后， Ext.extend还会产生一个superclass的引用。 Ext入门基础 Person = Ext.extend(Object, constructor: function(first, last) this.firstName = first; this.lastName = last; , getName: function() return this.firstName + + this.lastName; ); Developer = Ext.extend(Person, getName: function() if(this.isCoding) return Go Away!; else / 访问父类的方法 return Developer.superclass.getName.call(this); ); var p = new Person(John, Smith); var d = new Developer(John, Smith); alert(p.getName();/John Smith alert(d.getName();/John Smith 类编程-继承与重写 v override v override方法也编辑、修改类的其中一种途径，不过本方法不会创建一个新类 ，而是对现有类予以修改其行为，第一个参数是要覆盖的类，第二个参数就 是覆盖列表。override方法实际是修改类prototype的属性。 v / 我们已声明的Person类 v Ext.override(Person, v getName: function() v / 覆盖了旧行为，这次last name排头 v return this.lastName + + this.firstName; v v ); v var p = new Person(John, Smith); v alert(p.getName();/Smith John / 覆盖了旧行为，这次last name排头 Ext入门基础 类编程-单例(Singletons) v 单例另一种较常见的说法是“模块设计模式”，如果某一个类静态方法较多，或 者该类只须要实例化一次，那么采用单例的模式就很不错了。JavaScript的单 例模式中，我们常常会创建私有JavaScript变量或通过高明的闭包手法建立私 有的方法，以一段程序入口的范例代码就能说明多少问题。 v MyApp = function() v var data; /外部无法访问data，这是的私有成员 v return v init: function() v / 初始化程序 v , v getData: function() v return data; v v ; v (); v Ext.onReady(MyApp.init, MyApp); Ext入门基础 类编程-命名空间 v 命名空间（Namespaces）(类似于java中的包) v 命名空间对组织代码很方便，可在两方面体现其益处：其一是用了命名空间 ，很大程度避免了全局空间被污染的问题，污染全局的成员终究不是一个好 习惯，例如Ext对象本身就是在全局空间的一个对象。要养成一个良好的习惯 ，就要把写好的类放进一个命名空间中，可以用你公司的名字或程序的名字 决定命名；其二是有助规范好你的代码，把相类似的或相依赖的类都放在同 一个名命空间 v 中，也方便向其它开发者指明代码其意图。 v / 两种方式都是一样的，后者的为佳。 v Espace( v MyCompany, v MyCompany.Application, v MyCompany.Application.Reports v ); v Espace(MyCompany.Application.Reports); Ext入门基础 AJAX v Ext.Ajax对象继承自Ext.data.Connection，定义为单例提供了一个既统一又高 度灵活的Ajax通迅服务。利用这个单例对象，就可以处理全体Ajax请求，并 执行相关的方法、事件和参数。 v Ext.Ajax的事件 v 每次请求都触发事件，这是全局规定的。 v beforerequest (conn, opts) v 任何Ajax请求发送之前触发。 v requestcomplete (conn, response, opts) v 任何Ajax成功请求后触发。 v requestexception (conn, response, opts) v 服务端返回一个错误的HTTP状态码时触发。 v / 例子:凡是Ajax通迅都会通过spinner告知状态如何。 v Ext.Ajax.on(beforerequest, this.showSpinner, this); v Ext.Ajax.on(requestcomplete, this.hideSpinner, this); v Ext.Ajax.on(requestexception, this.hideSpinner, this); Ext入门基础 AJAX v Ext.Ajax的属性 v 由于Ext.Ajax是单例，所以你可以在发起请求的时候才覆盖Ext.Ajax属性。 v 这些是最常见的属性： v method：用于请求的默认方法，注意这里大小写有关系的，应为是全部 v 大写（默认为undefined，如不设置参数就是“POST”，否则是“GET”）。 v extraParams：收集各属性的对象，每次发起请求就会把该对象身上的各 v 属性作为参数发送出去（默认为undefined）需要与Session信息和其它 v 数据交互就要在这里设置。 v url： 请求目标的服务器地址（默认为undefined），如果服务端都用 v 一个url来接收请求，那么在这里设置过一次就足够了。 v defaultHeaders：对请求头部设置的对象（默认为undefined）。 v / 每次请求都将这字段与信息注入到头部中去。 v Ext.Ajax.defaultHeaders = v Powered-By: Ext Core v ; Ext入门基础 AJAX v Ext.Ajax.request v Ext.Ajax.request就是发送与接收服务端函数的函数。服务端返用response以 决定执行success或failure函数。注意这种success/failure函数是异步的，即 就是服务端有响应后客户端这边回头调用（回调函数），期用客户端的Web 页面还可以进行其它任务的操作。 v Ext.Ajax.request( url: login.do, /请求地址 /提交参数组 params: LoginName:Ext.get(LoginName).dom.value, LoginPassword:Ext.get(LoginPassword).dom.value