ExtJS开发框架入门.ppt

《ExtJS开发框架入门.ppt》由会员分享，可在线阅读，更多相关《ExtJS开发框架入门.ppt（94页珍藏版）》请在三一办公上搜索。

1、Ext JS开发框架入门,框架简介、环境搭建、helloWord示例,EXT核心组件应用,Ext框架,EXT框架基础,Ext 框架简介,怎样搭建EXT运行环境及开发环境,helloWord示例程序,框架简介、环境搭建及HelloWord,Ext框架简介,什么是ext？Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。Ext最新版本是ext3.2,Ext框架简介,Ext提供一系

2、列的对象类，这些基本上都是用于处理WEB页面控件的。Ext的发布包括三个方面的内容：API参考手册、示例程序及开发包。,Ext框架简介,EXT API参考手册,Ext框架简介,示例程序,Ext示例程序包共包括十二大类近100示例程序。,Ext框架简介,开发包,adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。build：压缩后的ext全部源码(里面分类存放)。docs：API帮助文档。exmaples：提供使用ExtJs技术做出的小实例。resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。source：无压缩Ext全部的

3、源码(里面分类存放)遵从Lesser GNU（LGPL）开源的协议。ext-all.js：压缩后的Ext全部源码。ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。,Ext框架简介,怎样搭建EXT运行环境及开发环境,开发环境把Ext的开发包直接复制到WEB工程的目录下,helloWord示例程序,新建HTML文件并在页面中引入ExtJS的样式及ExtJS库文件样式文件为resource

4、s/css/ext-all.css库文件主要包含两个：adapter/ext/ext-base.js及ext-all.js其中ext-base.js是框架基础库，ext-all.js是extjs的核心库。,helloWord示例程序,helloWord在HTML直接嵌入代码实现,Ext.onReady(function()Ext.Msg.alert(helloWord,Hello Word!););,helloWord示例程序,Ext类库简介,Ext框架基础及核心简介,Ext组件简介,Ext入门基础,Ext类库简介,ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以

5、在页面中调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成：底层API(core)控件(widgets)实用工具(Utils),Ext类库简介,底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的core 子目录中，包括DomHelper.js、Element.js 等文件。,Ext类库简介,控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直

6、接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中。,Ext类库简介,实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能,Ext入门基础,尺寸&大小,定位,get,getDOM,getCmp的区别,DOM的增删改查,动画,类编程,事件,AJAX,Ext入门基础,要学习及应用好Ext框架，必须需要理解Html DOM、Ext Element及Component三者之间的区别。每一个HTML页面都有一个

7、层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。(通常使用Ext.get获得Element对象)对于终端用户来说，仅仅有Ele

8、ment是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。(通常使用Ext.getCmp获得Component对象),Ext入门基础,getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Eleme

9、nt)等。(与getElementById是一个效果)Ext.onReady(function()var e=new Ext.Element(hello);Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom););/Html页面中包含一个id为hello的div，代码如下：aaa在上面的代码中，Ext.getDom(hello)、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。,Ext中 get、getDom、getCmp的区别,Ext入门基础,get方法中只有一个参数，这个参数是混合参数，可以

10、是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。get方法其实是的简写形式。Ext.onReady(function()var e=new Ext.Element(hello);Ext.get(hello);Ext.get(document.getElementById(hello);Ext.get(e););/Html页面中包含一个id为hello的div，代码如下：aaaExt.get(hello)、Ext.get(document.getElementById(hello)、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。,

11、Ext中 get、getDom、getCmp的区别,Ext入门基础,getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法中只有一个参数，也就是组件的id。getCmp方法其实是方法的简写形式。Ext.onReady(function()var myPanel=new Ext.Panel(id:“myFirstPanel”,title:“旧的标题,renderTo:hello,width:300,height:200);Ext.getCmp(myFirstPanel).setTitle(新的标题););/Html页面中包含一个

12、id为hello的div，代码如下：aaa我们使用Ext.getCmp(“myFirstPanel).来得到id为myFirstPanel的组件，并调用其setTitle方法来设置该面板的标题,Ext中 get、getDom、getCmp的区别,Ext.Element占Ext Core库的篇幅很大，其中方法就占据了大部份。因此我们将这些方法可分为下面几类：DOM查询或遍历（如query、select、findParent）CSS（如setStyle、addClass）DOM操控（如createChild、remove）方位、尺寸（如getHeight、getWidth）,Ext入门基础,DOM

13、的增删改查,DOM查询,获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。Ext.get(elId).next();类似的还有:Ext.get(elId).prev();/上一个侧边节点Ext.get(elId).first();/第一个节点Ext.get(elId).last();/最后一个节点Ext.get(elId).parent();/父节点/等等比如要获取页面上所有的p标签,则可以使用:var ps=Ext.select(p);这样你就可以对所要获取的元素进行操作了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法

14、对其所包含的元素进行遍历:ps.each(function(el)el.highlight();/高亮);当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement对象上,如:ps.highlight();/select方法返回的结果可直接如同Element般地操作或是:Ext.select(p).highlight();当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的XPath,HTML属性等,Ext入门基础,DOM查询-Ext.query与Ext.select,Ext.query和Ext.select的作用同是根据CSS选择符,基

15、本的XPath,HTML属性等查找出一个或多个元素。区别在于返回类型上。分别是：query方法返回的是JavaScript标准的数组类型；select方法返回的是CompositeElement类型，试比较：alter(Ext.isArray(Ext.query(a.BigClass);/truealter(Ext.query(a.BigClass).length);/里面包含的元素个数Ext.select(a.BigClass).each(function(i)i.dom.href=javescript:void(0);/找到所有带有BigClass样式的A元素修改其链接);Composit

16、eElement类型属于Ext自定义的类型，简单地说是以一个Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口，也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元素，均被视为一个单独元素处理。它的用法和单个的Element对象一样。select方法返回的结果可直接如同Element般地操作，一般比query方法常用。,Ext入门基础,DOM查询-DomQuery详解,DomQuery是Ext Core提供的HTML或XML文档选择器，它支持大部分的CSS 3选择器规则，同时提供了一些自定义方式.DomQuery主要有4种选择方式

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

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

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

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

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

22、9）Ext.select(input:last);/选择最后一个input元素（10）E:nth(n)：选择匹配的第n（n1）个元素E。其使用语法请看下面代码。Ext.select(input:nth(2);/选择第2个input元素（11）E:odd：是语法“:nth-child(odd)”的简写。（12）E:evan：是语法“:nth-child(evan)”的简写。（13）Ext.select(div:contains(list);/选择innerHTML属性包含“list”的div（14）Ext.select(div:nodeValue(test);/选择包含文本节点且值为“test”

23、的div（15）Ext.select(input:not(:checked);/选择不包含checked属性的input（16）Ext.select(div:has(p);/选择包含p的div（17）Ext.select(div:next(p);/选择与包含p的div同层的下一个div（18）Ext.select(div:prev(p);/选择与包含p的div同层的下一个div,Ext入门基础,DOM查询-DomQuery详解,4.通过CSS值进行选择。主要有以下6种语法。（1）E:display=none：选择display值为none的元素E。其使用语法请看下面代码。Ext.select(

24、div:display=none);/选择display值为none的元素E（2）Ext.select(div:display=none);/选择display值以none开始的元素E（3）Ext.select(div:display$=none);/选择display值以none结尾的元素E（4）Ext.select(div:display*=none);/选择display值包含字符串none的元素E（5）Ext.select(div:display%=none);/选择display值整除2的元素E（6）Ext.select(div:display!=none);/选择display值不

25、等于none的元素EDomquery的语法可以单独使用，也可以组合在一起使用，例如以下代码：Ext.select(div,span);/选择所有div元素与span元素/选择class为red，且是第1个子节点，display属性为none的divExt.select(div.red:first-childdisplay=none);如果没有指定选择器开始搜索的根节点，默认是从body节点开始，这就等于每次都要做全文搜索，其性能可想而知，是相当低效的，因此，建议大家在每次搜索时都指定搜索的根节点，减少搜索范围。设置搜索根节点的语法请看下面代码。Ext.select(div,true,elId)

26、;/elId为根节点id/下面这句与上面的效果是一样的Ext.get(elid).select(div);,Ext入门基础,操纵CSS,Ext为我们提供了很多操纵CSS的方法.addClass轻松地为一个元素添加样式：Ext.get(elId).addClass(myCls);/加入元素的myCls的样式radioClass添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。Ext.get(elId).radioClass(myCls);/为元素添加myCls在所有侧边元素上删除myCls样式removeClass移除元素身上一个或多个的CSS类。

27、Ext.get(elId).removeClass(myCls);/移除元素的样式toggleClass轮换（Toggles，两种状态中转换到一个状态）-添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。Ext.get(elId).toggleClass(myCls);/加入(移除,再加入)样式 Ext.get(elId).toggleClass(myCls);hasClass检查某个CSS类是否作用于这个元素身上。If(Ext.get(elId).hasClass(myCls)alert(是有样式的);replaceClass在这个元素身上替换CSS类。Ext.get(el

28、Id).replaceClass(myClsA,myClsB);,Ext入门基础,操纵CSS,getStyle返回该元素的统一化当前样式和计算样式。var color=Ext.get(elId).getStyle(color);var zIndx=Ext.get(elId).getStyle(z-index);var fntFmly=Ext.get(elId).getStyle(font-family);/.等等setStyle设置元素的样式，也可以用一个对象参数包含多个样式。Ext.get(elId).setStyle(color,#FFFFFF);Ext.get(elId).setStyl

29、e(z-index,10);Ext.get(elId).setStyle(display:block,overflow:hidden,cursor:pointer);Ext.get(elId).setStyle(color,#FFFFFF,true);/带有动画的变换过程Ext.get(elId).setStyle(color,#FFFFFF,duration:.75);/带有0.75秒动画变换过程getColor为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。Ext.get(elId).getColor(background-color

30、);Ext.get(elId).getColor(color);Ext.get(elId).getColor(border-color);/.等等setOpacity设置元素的透明度。Ext.get(elId).setOpacity(.5);Ext.get(elId).setOpacity(.45,true);/动画Ext.get(elId).setOpacity(.45,duration:.5);/附有半秒的动画过程clearOpacity清除这个元素的透明度设置。Ext.get(elId).clearOpacity();,Ext入门基础,操纵DOM,appendChild 把送入的元素归为

31、这个元素的子元素。var el=Ext.get(elId1);Ext.get(elId).appendChild(elId2);/elId2添加到elId里面Ext.get(elId).appendChild(el);/参数还可以是:elId2,elId3,el.dom,Ext.select(div)appendTo把这个元素添加到送入的元素里面。Ext.get(elId).appendTo(elId2);/elId添加到elId2里面Replace 用于当前这个元素替换传入的元素。Ext.get(elId).replace(elId2);/elId去替换elId2replaceWith 用传

32、入的元素替换这个元素Ext.get(elId).replaceWith(elId2);/elId2替换掉elId.insertBefore 传入一个元素的参数，将其放置在当前元素之前的位置Ext.get(elId).insertBefore(elId2);insertFirst 可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHelper配置项对象”作为参数传入），这个元素将作为当前元素的第一个子元素出现。Ext.get(elId).insertFirst(el);/用DomHelper配置项创建新节点 Ext.get(elId).insertFirst(tag:p,cls:

33、myCls,html:Hi I am the new first child);remove从DOM里面移除当前元素，并从缓存中删除。Ext.get(elId).remove();/elId在缓存和dom里面都没有,Ext入门基础,操纵DOM-DOMHepler配置项,在上面的例子中，大家可能就注意到这样的语法：.insertFirst(tag:p,html:Hi I am the new first child);insertFirst方法的那个参数作用是什么呢？参数就是要创建的装饰元素(HTML元素)在DomHelper 中是怎么表示的，也就是DomHelper的配置选项，其配置项支持很多

34、的HTML属性，html片断也行，至于html属性就可以是Dom节点的很多属性了（css class、url、src、id等）。DomHelper配置可视作任何HTML元素的等价物.DomHelper是专用于动态生成装饰元素的实用工具，已解决大多数浏览器之间差别的问题，避免了原始操作DOM脚本的麻烦。对于HTML片断与innerHTML的操作，DomHelper经充分考虑并在性能上有足够的优化。Ext.DomHelper是一个单例，因此无须实例化即可调用其静态方法:markup,insertHtml,insertBefore,insertAfter,insertFirst,append,ove

35、rwrite例1:Ext.DomHelper.append(my-div,tag:ul,cls:my-class);例2:Ext.DomHelper.insertFirst(my-div,Hi);,Ext入门基础,尺寸&大小,某个元素在页面上，我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外下，Ext Core也把这些任务抽象为清晰的API供大家使用。这些都是setter的方法，可传入动画的配置参数，或即就是以个布尔型的true，表示这是默认的动画。Ext.get(elId).setHeight(200,true);/设置高度为200px以默认配置进行动画/设置高度为150px以自定义的配

36、置进行动画Ext.get(elId).setHeight(150,duration:.5,/动画将会持续半秒callback:function()this.update(结束);/动画过后改变其内容为“结束”);getHeight/返回元素的偏移（offset）高度。getWidth/返回元素的偏移（offset）宽度。setHeight/设置元素的高度。setWidth/设置元素的宽度。getBorderWidth/返回指定边（side(s)）的padding宽度。getPadding/可以是t,l,r,b或是任何组合。传入lr的参数会得到leftpadding+right padding。

37、clip/保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 使用unclip()来移除。unclip/在调用clip()之前，返回原始的裁剪部分（溢出的）,Ext入门基础,定位,通过Ext Core定义的API能快速地采集元素位置的各方面数据，归纳为get的或set的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object-literal configuration object），或即就是以个布尔型的true，表示这是默认的动画。set/getXset/getYset/getXYset/getO

38、ffsetsTo/返回当前元素与送入元素的距离var elOffsets=Ext.get(elId).getOffsetsTo(anotherEl);set/getLeftset/getRightset/getTopset/getBottomsetLocation/无论这个元素如何定位，设置其在页面的坐标位置。clearPositioning/当文档加载后清除位置并复位到默认set/getPositioning/返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素,Ext入门基础,动画,Ext

39、Core里的Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类定义了一些常用的特效方法.puff/渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（visibility=hidden），但是块元素仍然会在 document对象中占据空间。如果需要将元素从 DOM 树删除，则使用remove配置选项。/默认el.puff();/常见的配置选项及默认值el.puff(easing:easeOut,duration:.5,remove:false,useDisplay:false);slideIn/slideOut/将元素滑入到视图中。fadeIn/fade

40、Out/将元素从透明渐变为不透明。switchOff/类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩。highlight/高亮pause/在任何后续的特效开始之前一次暂停。scale/以动画展示元素从开始的高度/宽度转换到结束的高度/宽度ghost/将元素从视图滑出并伴随着渐隐。/等等,Ext入门基础,事件,HTML元素的标准事件是指mouseover、mousedown、click、blur、focus、change等能够直接对HTML元素发生的事件。在ExtJS中，这些事件的处理可以用如下的代码：注册一个事件处理函数使用：Ext.get(myElement).on(click,my

41、Handler,myScope);myElement是要注册的元素的ID，click是事件的名称（注意，和HTML元素中的声明onXXX不同，这里不需要on），myHandler是处理函数的函数名称，myScope是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的window。撤销一个事件处理函数：Ext.get(myElement).un(click,myHandler,myScope)参数的意义同上。Ext.Element的on方法是addListener方法的简写.如果你想在一个元素上添加多个事件处理器可以这样一次搞定。var el=Ext.

42、get(myElement);el.on(click:fn:this.onMyClick,scope:this,delay:100/延迟0.1秒执行,-高级事件功能,mouseover:fn:this.onMyMouseOver,scope:this);,Ext入门基础,高级事件,事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容，Ext Core在此方面提供了一系列的配置选项。委托delegation减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基本要义是：并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登记一次便可，这样产生了中央化的一个事件处

43、理器，然后就有不断循环该事件周期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。我们想实现,点击不同的li,产生不同的效果.为此我们可能会这么做.Ext.get(btn-edit).on(click,function(e,t)/执行事件具体过程A);Ext.get(btn-delete).on(click,function(e,t)/执行事件具体过程B);Ext.get(btn-cancel).on(click,function(e,t)/执行事件具体过程C);,Ext入门基础,高级事件,使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依附的逻辑选择：Ext.get(actio

44、ns).on(click,function(e,t)/在div上登记一个事件switch(t.id)case btn-edit:/处理特定元素的事件具体过程Abreak;case btn-delete:/处理特定元素的事件具体过程Bbreak;case btn-cancel:/处理特定元素的事件具体过程Cbreak;);基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令，跳到对应匹配的元素那部分代码。这样方法具备可伸缩性，因为我们只要维护一个函数就可以控制那么多的元素的事件。,Ext入门基础,高级事件,是否

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

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

47、rideExt.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(Perso

48、n,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 Smithalert(d.getName();/John Smith,类编程-继承与重写,overrideoverride方法也编辑、修改类的其中一种途径，不过本方法不会创建一个新类，而是对现有类予以修

49、改其行为，第一个参数是要覆盖的类，第二个参数就是覆盖列表。override方法实际是修改类prototype的属性。/我们已声明的Person类Ext.override(Person,getName:function()/覆盖了旧行为，这次last name排头return this.lastName+this.firstName;);var p=new Person(John,Smith);alert(p.getName();/Smith John/覆盖了旧行为，这次last name排头,Ext入门基础,类编程-单例(Singletons),单例另一种较常见的说法是“模块设计模式”，如果某

50、一个类静态方法较多，或者该类只须要实例化一次，那么采用单例的模式就很不错了。JavaScript的单例模式中，我们常常会创建私有JavaScript变量或通过高明的闭包手法建立私有的方法，以一段程序入口的范例代码就能说明多少问题。MyApp=function()var data;/外部无法访问data，这是的私有成员return init:function()/初始化程序,getData:function()return data;();Ext.onReady(MyApp.init,MyApp);,Ext入门基础,类编程-命名空间,命名空间（Namespaces）(类似于java中的包)命名空