ExtJs中文教程.ppt

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,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.0,Ext,框架简介,Ext,提供一系列的对象类，这些基本上都是用于处理,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,全部的源码,(,里面分类存放,),遵从,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,库文件,样式文件为,resources/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,库后，我们就可以在页面中调用,ExtJS,的类及控件来实现需要的功能。,ExtJS,的类库由以下几部分组成：,底层,API(core),控件,(widgets),实用工具,(Utils),Ext,类库简介,底层,API(core),：,底层,API,中提供了对,DOM,操作、查询的封装、事件处理、,DOM,查询器等基础的功能。其它控件都是建立在这些底层,api,的基础上，底层,api,位于源代码目录的,core,子目录中，包括,DomHelper.js,、,Element.js,等文件。,Ext,类库简介,控件,(,widgets,),：,控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的,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,页面都有一个层次分明的,DOM,树模型，浏览器中的所有内容都有相应的,DOM,对象，动态改变页面的内容，正是通过使用脚本语言来操作,DOM,对象实现。,(,通常使用,getElementById/Ext.getDOM,获得,DOM,对象,),仅仅有,DOM,是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句,javascript,才能完成。因此，,Ext,在,DOM,的基础上，创建了,Ext Element,，可以使用,Element,来包装任何,DOM,，,Element,对象中添加了一系列快捷、简便的实用方法。,(,通常使用,Ext.get,获得,Element,对象,),对于终端用户来说，仅仅有,Element,是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了,Element,以外，,Ext,还建立了一系列的客户端界面组件,Component,，我们在编程时，只要使用这些组件,Componet,即可实现相关数据展示及交互等，而,Component,是较高层次的抽象，每一个组件在渲染,render,的时候，都会依次通过,Element,、,DOM,来生成最终的页面效果。,(,通常使用,Ext.getCmp,获得,Component,对象,),Ext,入门基础,getDom,方法能够得到文档中的,DOM,节点，,该方法中包含一个参数,，该参数可以是,DOM,节点的,id,、,DOM,节点对象或,DOM,节点对应的,Ext,元素,(Element),等。,(,与,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,方法中只有一个参数，这个参数是混合参数，可以是,DOM,节点的,id,、也可以是一个,Element,、或者是一个,DOM,节点对象等。,get,方法其实是,Ext.Element.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,，代码如下：,aaa,Ext.get(hello),、,Ext.get(document.getElementById(hello),、,Ext.get(e),等三个方法都可以得到一个与,DOM,节点,hello,对应的,Ext,元素,。,Ext,中,get,、,getDom,、,getCmp,的区别,Ext,入门基础,getCmp,方法用来获得一个,Ext,组件，也就是一个已经在页面中初始化了的,Component,或其子类的对象，,getCmp,方法中只有一个参数，也就是组件的,id,。,getCmp,方法其实是,Ext.ComponentMgr.get,方法的简写形式。,Ext.onReady(function()var myPanel=new Ext.Panel(id:“myFirstPanel”,title:“,旧的标题,renderTo:hello,width:300,height:200);Ext.getCmp(myFirstPanel).setTitle(,新的标题,););,/Html,页面中包含一个,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,的增删改查,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(),方法对其所包含的元素进行遍历,:,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,选择符,基本的,XPath,HTML,属性等查找出一个或多个元素。,区别在于返回类型上,。,分别是：,query,方法返回的是,JavaScript,标准的数组类型；,select,方法返回的是,CompositeElement,类型，试比较：,alter(Ext.isArray(Ext.query(a.BigClass);,/true,alter(Ext.query(a.BigClass).length);,/,里面包含的元素个数,Ext.select(a.BigClass).each(function(i)i.dom.href=javescript:void(0);/,找到所有带有,BigClass,样式的,A,元素修改其链接,);,CompositeElement,类型属于,Ext,自定义的类型，简单地说是以一个,Ext.Element,实例代表集合中多个元素，可实现,Element,对象上所有的接口，也就是说,CompositeElement,在,Ext,中用于表示元素的集合中不论有多少个元素，均被视为一个单独元素处理。,它的用法和单个的,Element,对象一样。,select,方法返回的结果可直接如同,Element,般地操作,，一般比,query,方法常用。,Ext,入门基础,DOM,查询,-,DomQuery,详解,DomQuery,是,Ext Core,提供的,HTML,或,XML,文档选择器，它支持大部分的,CSS 3,选择器规则，同时提供了一些自定义方式,.,DomQuery,主要有,4,种选择方式：,元素标记、元素属性、伪对象、,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);,/,将选择紧接在,div,下的元素,a,（,6,）,EF,：选择所有紧接在元素,E,后的同层元素,F,。其使用方法请看下面代码。,Ext.select(div,a);,/,将选择紧接在,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=bar,：选择,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,的元素。其使用语法请看下面代码。,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,子节点,（,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,元素,（,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”,的,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(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,值不等于,none,的元素,E,Domquery,的语法可以单独使用，也,可以组合在一起使用,，例如以下代码：,Ext.select(div,span);,/,选择所有,div,元素与,span,元素,/,选择,class,为,red,，且是第,1,个子节点，,display,属性为,none,的,div,Ext.select(div.red:first-childdisplay=none);,如果没有指定选择器开始搜索的根节点，默认是从,body,节点开始，这就等于每次都要做全文搜索，其性能可想而知，是相当低效的，因此，,建议大家在每次搜索时都指定搜索的根节点,，减少搜索范围。设置搜索根节点的语法请看下面代码。,Ext.select(div,true,elId);,/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,类。,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(elId).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).setStyle(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);,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,把送入的元素归为这个元素的子元素。,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,去替换,elId2,replaceWith,用传入的元素替换这个元素,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: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,的配置选项，其配置项支持很多的,HTML,属性，,html,片断也行，至于,html,属性就可以是,Dom,节点的很多属性了（,css class,、,url,、,src,、,id,等）。,DomHelper,配置可视作任何,HTML,元素的等价物,.,DomHelper,是,专用于动态生成装饰元素的实用工具,，已解决大多数浏览器之间差别的问题，避免了原始操作,DOM,脚本的麻烦。对于,HTML,片断与,innerHTML,的操作，,DomHelper,经充分考虑并在性能上有足够的优化。,Ext.DomHelper,是一个单例，因此无须实例化即可调用其静态方法,:,markup,insertHtml,insertBefore,insertAfter,insertFirst,append,overwrite,例,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,以自定义的配置进行动画,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,。,clip/,保存当前的溢出（,overflow,），然后进行裁剪元素的溢出部分 使用,unclip(),来移除。,unclip/,在调用,clip(),之前，返回原始的裁剪部分（溢出的）,Ext,入门基础,定位,通过,Ext Core,定义的,API,能快速地采集元素位置的各方面数据，归纳为,get,的或,set,的方法，全部浏览器都可通用。类似于上一节的尺寸大小的,API,，多数的,setter,方法支持动画效果。可在第二参数中传入动画的配置参数（,object-literal configuration object,），或即就是以个布尔型的,true,，,表示这是默认的动画。,set/getX,set/getY,set/getXY,set/getOffsetsTo/,返回当前元素与送入元素的距离,var elOffsets=Ext.get(elId).getOffsetsTo(anotherEl);,set/getLeft,set/getRight,set/getTop,set/getBottom,setLocation/,无论这个元素如何定位，设置其在页面的坐标位置。,clearPositioning/,当文档加载后清除位置并复位到默认,set/getPositioning/,返回一个包含,CSS,定位信息的对象。有用的技巧：连同,setPostioning,一起，可在更新执行之前，先做一个快照（,snapshot,），之后便可恢复该元素,Ext,入门基础,动画,Ext Core,里的,Fx,类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类定义了一些常用的特效方法,.,puff/,渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（,visibility=hidden,），但是块元素仍然会在,document,对象中占据空间。如果需要将元素从,DOM,树删除，则使用,remove,配置选项。,/,默认,el.puff();,/,常见的配置选项及默认值,el.puff(,easing:easeOut,duration:.5,remove:false,useDisplay:false,);,slideIn/slideOut/,将元素滑入到视图中。,fadeIn/fadeOut/,将元素从透明渐变为不透明。,switchOff/,类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩。,highlight/,高亮,pause/,在任何后续的特效开始之前一次暂停。,scale/,以动画展示元素从开始的高度,/,宽度转换到结束的高度,/,宽度,ghost/,将元素从视图滑出并伴随着渐隐。,/,等等,Ext,入门基础,事件,HTML,元素的标准事件是指,mouseover,、,mousedown,、,click,、,blur,、,focus,、,change,等能够直接对,HTML,元素发生的事件。在,ExtJS,中，这些事件的处理可以用如下的代码：,注册一个事件处理函数使用：,Ext.get(myElement).,on,(click,myHandler,myScope);,myElement,是要注册的元素的,ID,，,click,是事件的名称（,注意，和,HTML,元素中的声明,onXXX,不同，这里不需要,on,），,myHandler,是处理函数的函数名称，,myScope,是一个可选的参数，指定处理函数绑定的对象，也就是处理函数的作用域，如果不提供这个参数，则是默认的,window,。,撤销一个事件处理函数：,Ext.get(myElement).un(click,myHandler,myScope),参数的意义同上。,Ext.Element,的,on,方法是,addListener,方法的简写,.,如果你想在一个元素上添加多个事件处理器可以这样一次搞定。,var el=Ext.get(myElement);,el.on(click:fn:this.onMyClick,scope:this,delay:100/,延迟,0.1,秒执行,-,高级事件功能,mouseover:fn:this.onMyMouseOver,scope:this);,Ext,入门基础,高级事件,事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容，,Ext Core,在此方面提供了一系列的配置选项。,委托,delegation,减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基,本要义是：,并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登记,一次便可，这样产生了中央化的一个事件处理器，然后就有不断循环该事件周,期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。,我们想实现,点击不同的,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(actions).on(click,function(e,t),/,在,div,上登记一个事件,switch(t.id),case btn-edit:,/,处理特定元素的事件具体过程,A,break;,case btn-delete:,/,处理特定元素的事件具体过程,B,break;,case btn-cancel:,/,处理特定元素的事件具体过程,C,break;,);,基于,dom,各层经过逐层上报的原因，可以说，我们登记了的“,actions”,的,div,一定会被访问得到。这时就是执行我们所指定的,switch,指令，跳到对应匹配的元素那部分代码。这样方法具备可伸缩性，因为我们,只要维护一个函数就可以控制那么多的元素的事件,。,Ext,入门基础,高级事件,是否一次性触发,single,在登记事件的处理器的时候可以加入配置这个选项。,true,代表为事件触发后加入一个下次移除本身的处理函数。,el.on(click,function(e,t),/,执行事件具体过程,this,single:true,/,触发一次后不会再执行事件了,);,延时,delay,你在登记事件的处理器的时候可以加入配置这个选项