ExtJs中文教程(精品).ppt

《ExtJs中文教程(精品).ppt》由会员分享，可在线阅读，更多相关《ExtJs中文教程(精品).ppt（95页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、ExtJS开发框架简介开发框架简介主讲：毛冬情主讲：毛冬情主讲：毛冬情主讲：毛冬情框架简介、环境搭建、helloWord示例EXT核心组件应用Ext框架框架EXT框架基础Ext框架简介框架简介怎样搭建怎样搭建EXT运行环境及开发环境运行环境及开发环境helloWord示例程序示例程序框架简介、环境搭建及框架简介、环境搭建及HelloWordExt框架简介框架简介v什么是什么是ext？Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext

2、用在.Net、Java、Php等各种开发语言开发的应用中。Ext最新版本是ext3.0Ext框架简介框架简介vExt提供一系列的对象类，这些基本上都是用于处理WEB页面控件的。vExt的发布包括三个方面的内容：API参考手册、示例程序及开发包。Ext框架简介框架简介vEXTAPI参考手册Ext框架简介框架简介v示例程序Ext示例程序包共包括十二大类近100示例程序。Ext框架简介框架简介v开发包vadapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。vbuild：压缩后的ext全部源码(里面分类存放)。vdocs：API帮助文档。vexmaples：提

3、供使用ExtJs技术做出的小实例。vresources：ExtUI资源文件目录，如CSS、图片文件都存放在这里面。vsource：无压缩Ext全部的源码(里面分类存放)遵从LesserGNU（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运行环境及开发环境运行环境及开发环

4、境开发环境把Ext的开发包直接复制到WEB工程的目录下helloWord示例程序示例程序v新建HTML文件并在页面中引入ExtJS的样式及ExtJS库文件v样式文件为resources/css/ext-all.cssv库文件主要包含两个：adapter/ext/ext-base.js及ext-all.jsv其中ext-base.js是框架基础库，ext-all.js是extjs的核心库。helloWord示例程序示例程序vhelloWord在HTML直接嵌入代码实现Ext.onReady(function()Ext.Msg.alert(helloWord,HelloWord!););hello

5、Word示例程序示例程序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 位于源代码目录的c

6、ore 子目录中，包括DomHelper.js、Element.js 等文件。Ext类库简介类库简介v控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中。Ext类库简介类库简介v实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能Ext入门基础入门基础尺寸

7、尺寸&大小大小,定位定位get,getDOM,getCmp的区别的区别DOM的增删改查的增删改查动画动画类编程事件AJAXExt入门基础入门基础v要学习及应用好Ext框架，必须需要理解HtmlDOM、ExtElement及Component三者之间的区别。v每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)v仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点

8、等，我们都需要通过几句javascript才能完成。因此，Ext在DOM的基础上，创建了ExtElement，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。(通常使用Ext.get获得Element对象)v对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而Component是较高层次的抽象，每一个组件在渲染render的时候，都

9、会依次通过Element、DOM来生成最终的页面效果。(通常使用Ext.getCmp获得Component对象)Ext入门基础入门基础vgetDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。(与getElementById是一个效果)vExt.onReady(function()vare=newExt.Element(hello);Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom););v/Html页面中包含一个id为hello的div，代码

10、如下：aaav在上面的代码中，Ext.getDom(hello)、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。Ext中get、getDom、getCmp的区别Ext入门基础入门基础vget方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。vget方法其实是Ext.Element.get的简写形式。vExt.onReady(function()vare=newExt.Element(hello);Ext.get(hello);Ext.get(document.getEl

11、ementById(hello);Ext.get(e););v/Html页面中包含一个id为hello的div，代码如下：aaavExt.get(hello)、Ext.get(document.getElementById(hello)、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。Ext中get、getDom、getCmp的区别Ext入门基础入门基础vgetCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法中只有一个参数，也就是组件的id。vgetCmp方法其实是Ext.Component

12、Mgr.get方法的简写形式。vExt.onReady(function()varmyPanel=newExt.Panel(id:“myFirstPanel”,title:“旧的标题,renderTo:hello,width:300,height:200);Ext.getCmp(myFirstPanel).setTitle(新的标题););v/Html页面中包含一个id为hello的div，代码如下：aaav我们使用Ext.getCmp(“myFirstPanel).来得到id为myFirstPanel的组件，并调用其setTitle方法来设置该面板的标题Ext中get、getDom、getC

13、mp的区别vExt.Element占ExtCore库的篇幅很大，其中方法就占据了大部份。因此我们将这些方法可分为下面几类：vDOM查询或遍历（如查询或遍历（如query、select、findParent）vCSS（如（如setStyle、addClass）vDOM操控（如操控（如createChild、remove）v方位、尺寸（如方位、尺寸（如getHeight、getWidth）Ext入门基础DOM的增删改查DOM查询v获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。vExt.get(elId).next();v类似的还有:vExt.get(elId).prev();/上

14、一个侧边节点vExt.get(elId).first();/第一个节点vExt.get(elId).last();/最后一个节点vExt.get(elId).parent();/父节点v比如要获取页面上所有的p标签,则可以使用:vvarps=Ext.select(p);v这样你就可以对所要获取的元素进行操作了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的元素进行遍历:vps.each(function(el)vel.highlight();/高亮v);v当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于Comp

15、ositeElement对象上,如:vps.highlight();/select方法返回的结果可直接如同Element般地操作v或是:vExt.select(p).highlight();v当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的XPath,HTML属性等Ext入门基础DOM查询-Ext.query与Ext.selectvExt.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等查找出一个或多个元素。区别在于返回类型上区别在于返回类型上。v分别是：query方法返回的是JavaScript标准的数组类型；vselect

16、方法返回的是CompositeElement类型，试比较：valter(Ext.isArray(Ext.query(a.BigClass);/truevalter(Ext.query(a.BigClass).length);/里面包含的元素个数vExt.select(a.BigClass).each(function(i)i.dom.href=javescript:void(0);/找到所有带有BigClass样式的A元素修改其链接);vCompositeElement类型属于Ext自定义的类型，简单地说是以一个Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口

17、，也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元素，均被视为一个单独元素处理。v它的用法和单个的Element对象一样。select方法返回的结果可直接如同方法返回的结果可直接如同Element般地操作般地操作，一般比query方法常用。Ext入门基础DOM查询-DomQuery详解vDomQuery是ExtCore提供的HTML或XML文档选择器，它支持大部分的CSS3选择器规则，同时提供了一些自定义方式.vDomQuery主要有4种选择方式：元素标记、元素属性、伪对象、元素标记、元素属性、伪对象、CSS值值v1.通过元素标记选择，主要有以下通过元素标记

18、选择，主要有以下6种方法：种方法：v（1）*：选择任何元素。其使用方法请看下面代码。vExt.select(*);v（2）E：元素的标记为E。其使用方法请看下面代码。vExt.select(div);v（3）EF：选择包含在标记E中的标记F。其使用方法请看下面代码。vExt.select(diva);/将选择div下的a元素v（4）EF：选择包含在标记E中的直接子标记F。其使用方法请看下面代码。vExt.select(diva);/将选择div下的直接子元素av（5）E+F：选择所有紧接在元素E后的元素F。其使用方法请看下面代码。vExt.select(div+a);/将选择紧接在div下的元

19、素av（6）EF：选择所有紧接在元素E后的同层元素F。其使用方法请看下面代码。vExt.select(diva);/将选择紧接在div下的同层元素aExt入门基础DOM查询-DomQuery详解2.通过元素属性选择，主要有以下通过元素属性选择，主要有以下7种语法。种语法。v（1）Efoo：选择带有属性foo的元素。其使用语法请看下面代码。vExt.select(divid);/选择有id属性的div元素v（2）Efoo=bar：选择foo的属性值为bar的元素。其使用语法请看下面代码。vExt.select(inputchecked=true);/选择checked属性值为true的元素v（3

20、）Efoo=bar：选择foo的属性值以bar开头的元素。其使用语法请看下面代码。vExt.select(inputname=form1);/选择name属性值以form1开头的元素v（4）Efoo$=bar：选择foo的属性值以bar结尾的元素。其使用语法请看下面代码。vExt.select(inputname$=form1);/选择name属性值以form1结尾的元素v（5）Efoo*=bar：选择foo的属性值包含字符串bar的元素。其使用语法请看下面代码。vExt.select(inputname*=form1);/选择name属性值包含字符串form1的元素v（6）Efoo%=2：选

21、择foo的属性值能整除2的元素。其使用语法请看下面代码。vExt.select(inputvalue%=2);/选择value属性值能整除2的元素v（7）Efoo!=bar：选择foo的属性值不等于bar的元素。其使用语法请看下面代码。vExt.select(inputname!=form1);/选择name属性值不等于form1的元素Ext入门基础DOM查询-DomQuery详解v3.通过伪对象选择，主要有以下通过伪对象选择，主要有以下18种语法。种语法。v（1）Ext.select(ulli:first-child);/选择所有ul下的第一个li子节点v（2）Ext.select(ulli

22、:last-child);/选择所有ul下的最后一个li子节点v（3）Ext.select(ulli:nth-child(2);/选择所有ul下的第2个li子节点v（4）Ext.select(ulli:nth-child(odd);/选择所有ul下的奇数行li子节点v（5）Ext.select(ulli:nth-child(evan);/选择所有ul下的偶数行li子节点v（6）Ext.select(ulli:only-child);/选择所有ul下只有一个子节点的li节点v（7）Ext.select(input:checked);/选择所有checked属性值为true的元素v（8）Ext.s

23、elect(input:first);/选择第一个input元素v（9）Ext.select(input:last);/选择最后一个input元素v（10）E:nth(n)：选择匹配的第n（n1）个元素E。其使用语法请看下面代码。vExt.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”的divv（14）Ext.selec

24、t(div:nodeValue(test);/选择包含文本节点且值为“test”的divv（15）Ext.select(input:not(:checked);/选择不包含checked属性的inputv（16）Ext.select(div:has(p);/选择包含p的divv（17）Ext.select(div:next(p);/选择与包含p的div同层的下一个divv（18）Ext.select(div:prev(p);/选择与包含p的div同层的下一个divExt入门基础DOM查询-DomQuery详解v4.通过通过CSS值进行选择。主要有以下值进行选择。主要有以下6种语法。种语法。v（

25、1）E:display=none：选择display值为none的元素E。其使用语法请看下面代码。vExt.select(div:display=none);/选择display值为none的元素Ev（2）Ext.select(div:display=none);/选择display值以none开始的元素Ev（3）Ext.select(div:display$=none);/选择display值以none结尾的元素Ev（4）Ext.select(div:display*=none);/选择display值包含字符串none的元素Ev（5）Ext.select(div:display%=none

26、);/选择display值整除2的元素Ev（6）Ext.select(div:display!=none);/选择display值不等于none的元素EvDomquery的语法可以单独使用，也可以组合在一起使用可以组合在一起使用，例如以下代码：vExt.select(div,span);/选择所有div元素与span元素v/选择class为red，且是第1个子节点，display属性为none的divvExt.select(div.red:first-childdisplay=none);v如果没有指定选择器开始搜索的根节点，默认是从body节点开始，这就等于每次都要做全文搜索，其性能可想而知

27、，是相当低效的，因此，建议大家在每次搜索时都指定搜索的根节点建议大家在每次搜索时都指定搜索的根节点，减少搜索范围。设置搜索根节点的语法请看下面代码。vExt.select(div,true,elId);/elId为根节点idv/下面这句与上面的效果是一样的vExt.get(elid).select(div);Ext入门基础操纵CSSvExt为我们提供了很多操纵CSS的方法.vaddClass轻松地为一个元素添加样式：vExt.get(elId).addClass(myCls);/加入元素的myCls的样式vradioClass添加一个或多个className到这个元素，并移除其所有侧边（sib

28、lings）节点上的同名样式。vExt.get(elId).radioClass(myCls);/为元素添加myCls在所有侧边元素上删除myCls样式vremoveClass移除元素身上一个或多个的CSS类。vExt.get(elId).removeClass(myCls);/移除元素的样式vtoggleClass轮换（Toggles，两种状态中转换到一个状态）-添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。vExt.get(elId).toggleClass(myCls);/加入(移除,再加入)样式Ext.get(elId).toggleClass(myCls);vh

29、asClass检查某个CSS类是否作用于这个元素身上。vIf(Ext.get(elId).hasClass(myCls)alert(是有样式的);vreplaceClass在这个元素身上替换CSS类。vExt.get(elId).replaceClass(myClsA,myClsB);Ext入门基础操纵CSSvgetStyle返回该元素的统一化当前样式和计算样式。vvarcolor=Ext.get(elId).getStyle(color);vvarzIndx=Ext.get(elId).getStyle(z-index);vvarfntFmly=Ext.get(elId).getStyle(

30、font-family);/.等等vsetStyle设置元素的样式，也可以用一个对象参数包含多个样式。vExt.get(elId).setStyle(color,#FFFFFF);vExt.get(elId).setStyle(z-index,10);vExt.get(elId).setStyle(display:block,overflow:hidden,cursor:pointer);vExt.get(elId).setStyle(color,#FFFFFF,true);/带有动画的变换过程vExt.get(elId).setStyle(color,#FFFFFF,duration:.75

31、);/带有0.75秒动画变换过程vgetColor为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。vExt.get(elId).getColor(background-color);vExt.get(elId).getColor(color);vExt.get(elId).getColor(border-color);/.等等vsetOpacity设置元素的透明度。vExt.get(elId).setOpacity(.5);vExt.get(elId).setOpacity(.45,true);/动画vExt.get(elId).setO

32、pacity(.45,duration:.5);/附有半秒的动画过程vclearOpacity清除这个元素的透明度设置。vExt.get(elId).clearOpacity();Ext入门基础操纵DOMvappendChild把送入的元素归为这个元素的子元素。vvarel=Ext.get(elId1);vExt.get(elId).appendChild(elId2);/elId2添加到elId里面vExt.get(elId).appendChild(el);/参数还可以是:elId2,elId3,el.dom,Ext.select(div)vappendTo把这个元素添加到送入的元素里面。

33、vExt.get(elId).appendTo(elId2);/elId添加到elId2里面vReplace用于当前这个元素替换传入的元素。vExt.get(elId).replace(elId2);/elId去替换elId2vreplaceWith用传入的元素替换这个元素vExt.get(elId).replaceWith(elId2);/elId2替换掉elId.vinsertBefore传入一个元素的参数，将其放置在当前元素之前的位置vExt.get(elId).insertBefore(elId2);vinsertFirst可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“D

34、omHelper配置项对象”作为参数传入），这个元素将作为当前元素的第一个子元素出现。vExt.get(elId).insertFirst(el);/用DomHelper配置项创建新节点vExt.get(elId).insertFirst(vtag:p,vcls:myCls,vhtml:HiIamthenewfirstchildv);vremove从DOM里面移除当前元素，并从缓存中删除。vExt.get(elId).remove();/elId在缓存和dom里面都没有Ext入门基础操纵DOM-DOMHepler配置项v在上面的例子中，大家可能就注意到这样的语法：v.insertFirst(t

35、ag:p,html:HiIamthenewfirstchildv);vinsertFirst方法的那个参数作用是什么呢？参数就是要创建的装饰元素(HTML元素)在DomHelper中是怎么表示的，也就是DomHelper的配置选项，其配置项支持很多的HTML属性，html片断也行，至于html属性就可以是Dom节点的很多属性了（cssclass、url、src、id等）。vDomHelper配置可视作任何配置可视作任何HTML元素的等价物元素的等价物.vDomHelper是专用于动态生成装饰元素的实用工具专用于动态生成装饰元素的实用工具，已解决大多数浏览器之间差别的问题，避免了原始操作DOM脚

36、本的麻烦。对于HTML片断与innerHTML的操作，DomHelper经充分考虑并在性能上有足够的优化。vExt.DomHelper是一个单例，因此无须实例化即可调用其静态方法:vmarkup,insertHtml,insertBefore,insertAfter,insertFirst,append,overwritev例1:Ext.DomHelper.append(my-div,tag:ul,cls:my-class);v例2:Ext.DomHelper.insertFirst(my-div,Hi);Ext入门基础尺寸&大小v某个元素在页面上，我们就想获得到其尺寸大小或改变它的尺寸大小。

37、毫无意外下，ExtCore也把这些任务抽象为清晰的API供大家使用。这些都是setter的方法，可传入动画的配置参数，或即就是以个布尔型的true，表示v这是默认的动画。vExt.get(elId).setHeight(200,true);/设置高度为200px以默认配置进行动画v/设置高度为150px以自定义的配置进行动画vExt.get(elId).setHeight(150,vduration:.5,/动画将会持续半秒vcallback:function()this.update(结束);/动画过后改变其内容为“结束”v);vgetHeight/返回元素的偏移（offset）高度。vge

38、tWidth/返回元素的偏移（offset）宽度。vsetHeight/设置元素的高度。vsetWidth/设置元素的宽度。vgetBorderWidth/返回指定边（side(s)）的padding宽度。vgetPadding/可以是t,l,r,b或是任何组合。传入lr的参数会得到leftpadding+rightpadding。vclip/保存当前的溢出（overflow），然后进行裁剪元素的溢出部分使用unclip()来移除。vunclip/在调用clip()之前，返回原始的裁剪部分（溢出的）Ext入门基础定位v通过ExtCore定义的API能快速地采集元素位置的各方面数据，归纳为get

39、的或set的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object-literalconfigurationobject），或即就是以个布尔型的true，v表示这是默认的动画。vset/getXvset/getYvset/getXYvset/getOffsetsTo/返回当前元素与送入元素的距离vvarelOffsets=Ext.get(elId).getOffsetsTo(anotherEl);vset/getLeftvset/getRightvset/getTopvset/getBottomvsetLoc

40、ation/无论这个元素如何定位，设置其在页面的坐标位置。vclearPositioning/当文档加载后清除位置并复位到默认vset/getPositioning/返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioningv一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素Ext入门基础动画vExtCore里的Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类定义了一些常用的特效方法.vpuff/渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（visibility=hidden），但是块元素仍然会在doc

41、ument对象中占据空间。如果需要将元素从DOM树删除，则使用remove配置选项。v/默认vel.puff();v/常见的配置选项及默认值vel.puff(veasing:easeOut,vduration:.5,vremove:false,vuseDisplay:falsev);vslideIn/slideOut/将元素滑入到视图中。vfadeIn/fadeOut/将元素从透明渐变为不透明。vswitchOff/类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩。vhighlight/高亮vpause/在任何后续的特效开始之前一次暂停。vscale/以动画展示元素从开始的高度/宽度转换

42、到结束的高度/宽度vghost/将元素从视图滑出并伴随着渐隐。/等等Ext入门基础事件vHTML元素的标准事件是指mouseover、mousedown、click、blur、focus、change等能够直接对HTML元素发生的事件。在ExtJS中，这些事件的处理可以用如下的代码：v注册一个事件处理函数使用：vExt.get(myElement).on(click,myHandler,myScope);myElement是要注册的元素的ID，click是事件的名称（注意，和注意，和HTML元素中的声明元素中的声明onXXX不同，这里不需要不同，这里不需要on），myHandler是处理函数的

43、函数名称，myScope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的window。v撤销一个事件处理函数：Ext.get(myElement).un(click,myHandler,myScope)参数的意义同上。vExt.Element的的on方法是方法是addListener方法的简写方法的简写.v如果你想在一个元素上添加多个事件处理器可以这样一次搞定。vvarel=Ext.get(myElement);vel.on(click:fn:this.onMyClick,scope:this,delay:100/延迟0.1秒执行,-高级事件功能

44、,mouseover:fn:this.onMyMouseOver,scope:this);Ext入门基础高级事件v事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容，vExtCore在此方面提供了一系列的配置选项。v委托委托delegationv减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基v本要义是：v并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登记v一次便可，这样产生了中央化的一个事件处理器，然后就有不断循环该事件周v期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。vvvvvv我们想实现,点击不同的li,产生不同的效果.为此我们可

45、能会这么做.vExt.get(btn-edit).on(click,function(e,t)/执行事件具体过程A);vExt.get(btn-delete).on(click,function(e,t)/执行事件具体过程B);vExt.get(btn-cancel).on(click,function(e,t)/执行事件具体过程C);Ext入门基础高级事件v使用事件委托的方式代替事件委托的方式代替，在容器身上登记一个事件处理器，按照依v附的逻辑选择：vExt.get(actions).on(click,function(e,t)/在div上登记一个事件vswitch(t.id)vcasebt

46、n-edit:v/处理特定元素的事件具体过程Avbreak;vcasebtn-delete:v/处理特定元素的事件具体过程Bvbreak;vcasebtn-cancel:v/处理特定元素的事件具体过程Cvbreak;vv);v基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令，跳到对应匹配的元素那部分代码。这样方法具备可伸缩性，因为我们只要维护一个函数就可以控制那么多的元素的事件只要维护一个函数就可以控制那么多的元素的事件。Ext入门基础高级事件v是否一次性触发是否一次性触发singlev在登记事件的处理器

47、的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。vel.on(click,function(e,t)v/执行事件具体过程v,this,vsingle:true/触发一次后不会再执行事件了触发一次后不会再执行事件了v);v延时延时delayv你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后v处理函数延时执行的时间。vel.on(click,function(e,t)v/执行事件具体过程v,this,vdelay:1000/延迟事件，响应事件后开始计时（这里一秒）v);v缓冲缓冲bufferv将上面代码的delay换成buffer/在缓冲时间内触发

48、事件无效.v移除事件句柄移除事件句柄removeAllListenersvel.removeAllListeners();/在该元素身上移除所有已加入的侦听器(事件)。Ext入门基础类编程-继承与重写vJavaScript本身是基于原型的，这与普通基于类的编程语言相比，在实现继承的机制上有较大的出入。JavaScript中创建一个新类那便是修改了某个对象原型（prototype）的结果。Ext提供了许多简化这方面工作的函数。vExt支持以下类风格的编程行为：继承扩展（extend），重写（overrride）/直接覆盖。这意味着开发者可以根据需求加入自己的行为，创建自己的类，或者修改某些函数让

49、其更加合适。vextend与与overridevExt.extend方法创建新一个类之定义。第一个参数是父类，第二个参数是属性/函数的列表。第二个参数加入到对象的prototype中extend过后，Ext.extend还会产生一个superclass的引用。Ext入门基础Person=Ext.extend(Object,constructor:function(first,last)this.firstName=first;this.lastName=last;,getName:function()returnthis.firstName+this.lastName;);Developer=

50、Ext.extend(Person,getName:function()if(this.isCoding)returnGoAway!;else/访问父类的方法returnDeveloper.superclass.getName.call(this););varp=newPerson(John,Smith);vard=newDeveloper(John,Smith);alert(p.getName();/JohnSmithalert(d.getName();/JohnSmith类编程-继承与重写voverridevoverride方法也编辑、修改类的其中一种途径，不过本方法不会创建一个新类，而是