关闭

关闭

关闭

封号提示

内容

首页 Ext Core手册.pdf

Ext Core手册.pdf

Ext Core手册.pdf

上传者: lhxcc 2011-09-19 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《Ext Core手册pdf》,可适用于IT/计算机领域,主题内容包含ExtCore手册ExtCore概述简介ExtCore是一款具有多项功能的轻型JavaScript库基于MIT许可为大家服务。在ExtCore中有许符等。

ExtCore手册ExtCore概述简介ExtCore是一款具有多项功能的轻型JavaScript库基于MIT许可为大家服务。在ExtCore中有许多激赏的功能在倡导快速Web开发的同时也本着高质量、可伸缩性的代码的指导思想进行着。Core库对DOM操作、Ajax、事件、动画、模板、机制等的任务都有相应的支持。Core库基于MIT方式发布无论是一般的动态页面和简单的应用程序都可选择使用。下载可在本页面下载也可以到ExtCore主页面查找最新的版本来下载。引入ExtCore送到手上的ExtCore有调试的版本和供发布时的产品版本。产品版本已经作压缩(就是消除空白符、硬回车和注释)和混淆的处理(所有局部变量重命名为短的名称使用YUICompressor)。在开发阶段你应使用的是debug版本这样才会看到未混淆过的错误信息。要引入ExtCore的开发版本这样引入JavaScript文件就可以了:<scriptsrc="extcoredebugjs"><script>要引入产品版本(压缩并且gzipped后kb)只需要省略掉“debug”:<scriptsrc="extcorejs"><script>完事!ExtCore没有相关的CSS文件。最简单的例子完成ExtCore的加载之后拿下面的代码测试一下是否正确加载了:ExtonReady(function(){ExtDomHelperappend(documentbody,{tag:'p',cls:'someclass'})Extselect('psomeclass')update('ExtCoresuccessfullyinjected')})关于本手册的作者是TommyMaintz、AaronConran、JamesDonaghue、JamieAvins与EvanTrimboli。译者根据基于GNUFreeDocumentationLicense许可的原版于初次释放版本来翻译分设有简体中文和繁体中文(正体中文格式是PDF)两种版本。维护以上两种中文的翻译版本的是Ext中文站(ajaxjscom)译者主要是frank。文中许多部分取材于《Extx中文文档》。鉴于《文档》是frank与南宫小骏等诸多Ext爱好者之合力特此说明。元素(Element)获取元素(GettingElements)一份HTML文档通常由大量的装饰元素(markup)所组成。每当浏览器加载当前的html文档html文档其中的每一个标签都被翻译为HTMLElement以构建装饰树的文件对象模型(DocumentObjectModelDOM)。你可以在浏览器的全局空间中找到一个称为document的变量那个document就是DOM树的对象。document记忆了当页面加载完毕后而形成的每一份装饰元素引用。document对象有一个重要的方法getElementById允许在每个浏览中获取其中的HTMLElement对象。然而直接操纵DOM来说还有许多要注意的问题。ExtCore实现了ExtElement类来封装(Wraparound)各浏览器不同HTMLElement的对象。ExtElement占ExtCore库的篇幅很大其中方法就占据了大部份。因此我们将这些方法可分为下面几类:•CSS与样式(如setStyle、addClass)•DOM查询或遍历(如query、select、findParent)•DOM操控(如createChild、remove)•方位、尺寸(如getHeight、getWidth)你可以使用Extget方法创建ExtElement的实例达到封装普通的HTMLElement之目的。例如你有已一个id名为“myElementId”的元素便可以这样获取:varel=Extget('myElementId')用Firebug执行以下代码后观察ExtElement身上的方法有哪些。有一点要注意的就是你正在观察的是普通JavaScript对象我意思是说无所谓的public与private的方法它们均有在此列出若有疑问可参考API文档。varel=Extget('myElementId')consoledir(el)consoledir命令由Firebug提供执行该可方便地列出某个对象身上有什么成员这都是例于开发者阅读的形式显示的。你换可以通过折叠某个子对象以了解其牵连的属性。如图属性显示是黑色的方法函数是绿色的构造器(constructors)或类(class)就是红色的。现在我对id为myElementId的段落元素进行操作:varel=Extget('myElementId')eladdClass('error')这段代码作用后段落的字体颜色就变为红色页面的CSS规则有error的样式类属于error类的元素就会有红色效果:error{color:red}下一小节(CSS类与样式)会简介关于处理元素的不同方式。理解Flyweight享元模式(FlyweightDesignPattern)是一种节省内存的模式该模式的大概原理是建立单个全体对象然后不断反复使用它。Ext在启动的时候就创建了一个全局的ExtElement对象专为Flyweight的设计服务。这个全局的Flyweight实例可以为Dom里面任何一个节点保存引用。要访问这种Flyweight的对象请使用Extfly方法。Ext新手可能会因Extget()与Extfly()两者之间的用法而犯湖涂。如果感觉这个ExtElement元素是一直下去多次引用的那么可以使用Extget方法如果在一段时间内不需要存储元素的引用那么就使整个库部共享的对象Flyweight的ExtElement对象。通过Flyweight访问元素用Extfly(*元素id*)的方法。再如上面那段落我们撤销样式。Extfly('myElementId')removeClass('error')当执行这代码Ext就复用现有的享元对象不一定要建立一个全新ExtElement对象。fly方法较适合单行的、一次性的原子操作(atomicoperation)就算你想将某个元素存储起来也是无效的因为其它代码很有机会改变对象。例如我们看看下面的代码:varel=Extfly('foo')Extfly('bar')frame()eladdClass('error')frame()是ExtElement包中的动画方法产生高亮的效果你可以估计一下有什么现象出现?答案是id为bar的那个元素会产生frame效果随后立即应用上error的CSS样式效果那fooid的元素可什么事情都没有发生这是由于指向Flyweight对象的el引用已经被产生过frame效果的所使用。el就是bar元素这是关于Flyweight享元用法的重要内容如果你想搞清楚Extfly方法的用途适宜再看看这部份的内容。ExtgetExtget()可接收这几种类型的参数如HTMLElementExtElement、字符型返回的新实例。以下三种类型如下例:varel=Extget('elId')接收元素idvarel=Extget(el)接受ExtElementvarel=Extget(eldom)接受HTMLElementExtflyExtfly在参数方面与Extget的完全相同但其内置控制返回ExtElement的方法就完全不同Extfly从不保存享元对象的引用每次调用方法都返回独立的享元对象。其实区别在于“缓存”中因为缓存的缘故Extget需要为每个元素保存其引用就形成了缓存如果有相同的调用就返回但Extfly没有所谓的缓存机制得到什么就返回什么不是多次使用的情况下“一次性地”使用该元素就应该使用Extfly(例如执行单项的任务)。使用Extfly的例子:引用该元素一次即可搞掂了就完工Extfly('elId')hide()ExtgetDom送入String(id)、dom节点和ExtElement的参数ExtgetDom只会返回一个普通的dom节点。如下例:依据id来查dom节点varelDom=ExtgetDom('elId')依据dom节点来查dom节点varelDom=ExtgetDom(elDom)如果我们不了解ExtElement是什么直接用ExtgetDom返回旧的dom节点好了function(el){vardom=ExtgetDom(el)接下来干些事情……}CSS样式通过学习markup装饰部分我们已经晓得装饰与document的紧密联系下如何透过ExtCore较简便地取得数据。但进行document的布局又如何编排呢?是不是有一种方法可以控制布局也可以控制document的样式呢?答案便是用CascadingStyleSheets(CSS)处理。CSS正是用来页面可视化信息和布局的语言。ExtCore在方面真的是让我们用户感觉好使好用易如反掌直接修改它就行了。<styletype="textcss">myCls{color:#F}<style><divtype="myCls">您好!<div>上一例中我们赋予div元素“您好”的文本和让其颜色为红色(#F)。我们已经晓得Firebug可以为我们带来页面开发上的种种便利。凡页面中的任意一元素上面右击选择“InspectElement”(检测元素)弹出Firebug可以观察到dom树中真实情况该元素是定义在哪里的。Dom树右边的面板就是对应该元素身上的样式。如果你未曾熟悉Firebug的话暂时放下这块建议先学习一下它。它仿佛就是Web开发的高级示波器!心血来潮地修改站点的样式抑或是调试站点的样式“InspectElement”功能都贡献殊大。回到Ext中我们看看ExtCore中有哪些方法是为修改CSS所服务的。•addClass轻松地为一个元素添加样式:Extfly('elId')addClass('myCls')加入元素的'myCls'的样式•radioClass添加一个或多个className到这个元素并移除其所有侧边(siblings)节点上的同名样式。为元素添加'myCls'在所有侧边元素上删除'myCls'样式allsibilingsExtfly('elId')radioClass('myCls')•removeClass移除元素身上一个或多个的CSS类。Extfly('elId')removeClass('myCls')移除元素的样式•toggleClass轮换(Toggles两种状态中转换到一个状态)添加或移除指定的CSS类(如果已经存在的话便删除否则就是新增加)。Extfly('elId')toggleClass('myCls')加入样式Extfly('elId')toggleClass('myCls')移除样式Extfly('elId')toggleClass('myCls')再加入样式•hasClass检查某个CSS类是否作用于这个元素身上。if(Extfly('elId')hasClass('myCls')){是有样式的……}•replaceClass在这个元素身上替换CSS类。Extfly('elId')replaceClass('myClsA','myClsB')•getStyle返回该元素的统一化当前样式和计算样式。varcolor=Extfly('elId')getStyle('color')varzIndx=Extfly('elId')getStyle('zindex')varfntFmly=Extfly('elId')getStyle('fontfamily')等等•setStyle设置元素的样式也可以用一个对象参数包含多个样式。Extfly('elId')setStyle('color','#FFFFFF')Extfly('elId')setStyle('zindex',)Extfly('elId')setStyle({display:'block',overflow:'hidden',cursor:'pointer'})带有动画的变换过程Extfly('elId')setStyle('color','#FFFFFF',true)带有秒动画的变换过程Extfly('elId')setStyle('color','#FFFFFF',{duration:})等等•getColor为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。Extfly('elId')getColor('backgroundcolor')Extfly('elId')getColor('color')Extfly('elId')getColor('bordercolor')等等•setOpacity设置元素的透明度。Extfly('elId')setOpacity()Extfly('elId')setOpacity(,true)动画附有半秒的动画过程Extfly('elId')setOpacity(,{duration:})•clearOpacity清除这个元素的透明度设置。Extfly('elId')clearOpacity()Dom游历已知某个位置我们要其附近位置的dom树中游历是一件经常性的任务。ExtCore里面就有这样跨浏览器的方法允许我们在dom之中穿梭自如。再一次CSS进入了我们的视野使得干起复杂的任务时没那么痛苦。基于CSS的选择符(选择器)在方面也尤其地干练!拿以下的装饰做示范:<styletype="textcss">red{color:#F}<style><divid='elId'><ul><li>aone<li><li>atwo<li><li>athree<li><li>afour<li><ul><ul><li>bone<li><li>btwo<li><li>bthree<li><ul><div>这是一堆列表元素要让其中的偶数行变红色。要如此优雅地实现该功能Ext不是没有键入命令如下:Extfly('elId')select('li:nthchild(n)')addClass('red')结果如下:我们已见识过游历DOM方面依靠ExtCore所带来的强大威力类似还有更多的看看:•is测试当前元素是否与传入的选择符相符一致。varel=Extget('elId')if(elis('pmyCls')){条件成立}•findParent定位于此节点以此节点为起点向外围搜索外层的父节点搜索条件必须符合并匹配传入的简易选择符。Extfly('elId')findParent('div')返回dom节点Extfly('elId')findParent('div',)查找个节点Extfly('elId')findParent('div',,true)返回ExtElement•findParentNode定位于此节点的“父节点”以此节点的“父节点”为起点向外围搜索外层的“父父”节点搜索条件必须符合并匹配传入的简易选择符。Extfly('elId')findParentNode('div')•up沿着DOM向外围搜索外层的“父父”节点搜索条件必须符合并匹配传入的简易选择符。Extfly('elId')up('div')Extfly('elId')up('div',)限层的内查找•select传入一个CSS选择符的参数然后依据该CSS选择符从当前元素下面形成期待匹配子节点的集合也就是“选择”的操作最后以一个ExtCompositeElement类型的组合元素的形式返回。如果以Extselect()调用表示从document可是搜索。返回结果的CompositeElementExtfly('elId')select('div:nthchild()')返回数组Extfly('elId')select('div:nthchild()',true)整个document都会搜索Extselect('div:nthchild()')•query进行一次query的查询返回DOM节点组成的数组。可选地第二参数设置为查询的起点如不指定则为document。返回dom节点组成的数组Extquery('div:nthchild()')•child基于送入的选择符不限定深度进行搜索符合的话选取单个子节点。Extfly('elId')child('phighlight')返回的类型是ExtElementExtfly('elId')child('phighlight',true)返回dom节点•down基于该选择符"直接"选取单个子节点。Extfly('elId')down('span')返回的类型是ExtElementExtfly('elId')down('span',true)返回dom节点•parent返回当前节点的那个父节点可选地可送入一个期待的选择符。返回父节点类型是ExtElementExtfly('elId')parent()返回父节点类型是htmldomExtfly('elId')parent("",true)返回父级节点但一定要是div的找到就返回类型是ExtElementExtfly('elId')parent("div")•next获取下一个侧边节点跳过文本节点。可选地可送入一个期待的选择符。返回下一个侧边节点类型是ExtElementExtfly('elId')next()返回下一个侧边节点类型是htmldomExtfly('elId')next("",true)返回下一个侧边节点但一定要是div的找到就返回类型是ExtElementExtfly('elId')next("div")•prev获取上一个侧边节点跳过文本节点。可选地可送入一个期待的选择符。返回上一个侧边节点类型是ExtElementExtfly('elId')prev()返回上一个侧边节点类型是htmldomExtfly('elId')prev("",true)返回上一个侧边节点但一定要是div的找到就返回类型是ExtElementExtfly('elId')prev("div")•first获取第一个侧边节点跳过文本节点。可选地可送入一个期待的选择符。返回第一个侧边节点类型是ExtElementExtfly('elId')first()返回第一个侧边节点类型是htmldomExtfly('elId')first("",true)返回第一个侧边节点但一定要是div的找到就返回类型是ExtElementExtfly('elId')first("div")•last获取最后一个侧边节点跳过文本节点。可选地可送入一个期待的选择符。返回最后一个侧边节点类型是ExtElementExtfly('elId')last()返回最后一个侧边节点类型是htmldomExtfly('elId')last("",true)返回最后一个侧边节点但一定要是div的找到就返回类型是ExtElementExtfly('elId')last("div")DOM操控DHTML常见的一项任务就是DOM元素的增、删、改、查。鉴于不同浏览器的差别很大搞起来会很麻烦ExtCore就设计了一个抽离不同浏览器之间差异的API并考虑了执行速度方面的优化。我们可以轻松地围绕DOM树做增、删、改、查的任务。先观察一下这装饰元素:<divid='elId'><p>paragraphone<p><p>paragraphtwo<p><p>paragraphthree<p><div>渲染出来这样:这时我们为其加入一个子节点“elId”:Extfly('elId')insertFirst({tag:'p',html:'Hi!Iamthenewfirstchild'})插入后是这样:小菜一碟吧!?我们再操练一下ExtCore强大的API功能:•appendChild把送入的元素归为这个元素的子元素。varel=Extget('elId')用id指定Extfly('elId')appendChild('elId')ExtElement添加Extfly('elId')appendChild(el)选择符组合地添加Extfly('elId')appendChild('elId','elId')直接添加dom节点Extfly('elId')appendChild(eldom)添加CompositeElement一组的divExtfly('elId')appendChild(Extselect('div'))•appendTo把这个元素添加到送入的元素里面。varel=Extget('elId')'elId'添加到'elId'里面Extfly('elId')appendTo('elId')Extfly('elId')appendTo(el)添加到ExtElementel•insertBefore传入一个元素的参数将其放置在当前元素之前的位置。varel=Extget('elId')dom节点在前面插入Extfly('elId')insertBefore('elId')ExtElementel在前面插入Extfly('elId')insertBefore(el)•insertAfter传入一个元素的参数将其放置在当前元素之后的位置。varel=Extget('elId')dom节点在后面插入Extfly('elId')insertAfter('elId')ExtElementel在后面插入Extfly('elId')insertAfter(el)•insertFirst可以是插入一个元素也可以是创建一个元素(要创建的话请使用“DomHelper配置项对象”作为参数传入)总之这个元素作为当前元素的第一个子元素出现。varel=Extget('elId')插入的dom节点作为第一个元素Extfly('elId')insertFirst('elId')插入的ExtElement作为第一个元素Extfly('elId')insertFirst(el)用DomHelper配置项创建新节点新节点会作为第一个子元素被插入。Extfly('elId')insertFirst({tag:'p',cls:'myCls',html:'HiIamthenewfirstchild'})•replace用于当前这个元素替换传入的元素。varel=Extget('elId')'elId'去替换'elId'Extfly('elId')replace('elId')'elId'去替换'elId'Extfly('elId')replace(el)•replaceWith用传入的元素替换这个元素。参数可以是新元素或是要创建的DomHelper配置项对象。varel=Extget('elId')Extfly('elId')replaceWith('elId')'elId'替换掉'elId'Extfly('elId')replaceWith(el)'elId'替换掉'elId'用DomHelper配置项创建新节点并用该节点换掉‘elId’。Extfly('elId')replaceWith({tag:'p',cls:'myCls',html:'HiIhavereplacedelId'})DomHelper配置项在上面的例子中大家可能就注意到这样的语法:insertFirst({tag:'p',html:'HiIamthenewfirstchild'})insertFirst方法的那个参数作用是什么呢?参数就是要创建的装饰元素在DomHelper中是怎么表示的也就是DomHelper的配置选项其配置项支持很多的属性html片断也行至于html属性就可以是Dom节点的很多属性了(cssclass、url、src、id等)。这里是ExtElement一些的API直接用来与ExtDomHelper相交互:•createChild传入一个DomHelper配置项对象的参数将其创建并加入到该元素。varel=Extget('elId')vardhConfig={tag:'p',cls:'myCls',html:'HiIhavereplacedelId'}创建新的节点放到'elId'里面elcreateChild(dhConfig)创建新的节点居el第一个子元素之前elcreateChild(dhConfig,elfirst())•wrap创建一个新的元素包裹在当前元素外面。Extfly('elId')wrap()div包着elId用新建的一个元素来包着elIdExtfly('elId')wrap({tag:'p',cls:'myCls',html:'HiIhavereplacedelId'})Html片断Html片断顾名思义系html装饰中的某一部分。ExrCore就是以html片断的形式修改控制dom换言之我们关心装饰片断即可修改该部分的dom无须为浏览器的实现和性能而烦恼。ExtCore已经做足涵盖这方面的功夫阁下所做的只是提供好相关装饰元素如:<divid='elId'><li>one<li><li>two<li><li>three<li><li>four<li><div>你猜ExtCore会怎样做?Extfly('elId')insertHtml('beforeBegin','<p>Hi<p>')形成装饰元素如下:<p>Hi<p><divid='elId'><li>one<li><li>two<li><li>three<li><li>four<li><div>不意外吧?这是因为我们可以自由定位插入的顺序。我们指定“beforeBegin”就是这样:Extfly('elId')insertHtml('afterBegin','<p>Hi<p>')看一看:<divid='elId'><p>Hi<p><li>one<li><li>two<li><li>three<li><li>four<li><div>现在我们使用“beforeEnd”。Extfly('elId')insertHtml('beforeEnd','<p>Hi<p>')来看看:<divid='elId'><li>one<li><li>two<li><li>three<li><li>four<li><p>Hi<p><div>最后试试“afterEnd”。Extfly('elId')insertHtml('beforeEnd','<p>Hi<p>')看看:<divid='elId'><li>one<li><li>two<li><li>three<li><li>four<li><div><p>Hi<p>处理HTML片断时下列方法也是有帮助的:•insertHtml插入HTML片断到这个元素。至于要插入的html放在元素的哪里你可指定beforeBegin,beforeEnd,afterBegin,afterEnd这几种。第二个参数是插入HTML片断第三个参数是决定是否返回一个ExtElement类型的DOM对象。Extfly('elId')insertHtml('beforeBegin','<p><ahref="anotherpagehtml'>点击我<a><p>')返回dom节点Extfly('elId')insertHtml('beforeBegin','<p><ahref="anotherpagehtml'>点击我<a><p>',true)返回ExtElement•remove从DOM里面移除当前元素并从缓存中删除。Extfly('elId')remove()elId在缓存和dom里面都没有•removeNode移除document的DOM节点。如果是body节点的话会被忽略。ExtremoveNode(node)从dom里面移除(HTMLElement)AjaxExtCore具备完整的AjaxAPI。关于本部分的详细内容会在文章尾部交待清楚不过这里先介绍API中的概貌:•load直接访问Updater的ExtUpdaterupdate()方法(相同的参数)。参数与ExtUpdaterupdate()方法的一致。Extfly('elId')load({url:'serverSidephp'})•getUpdater获取这个元素的UpdateManager。varupdr=Extfly('elId')getUpdater()updrupdate({url:'http:myservercomindexphp',params:{param:"foo",param:"bar"}})事件控制EventHandling事件控制为解决跨浏览器的工作带来便利。正如ExtElement封装了原生的Dom类型节点ExtEventObject也是封装了浏览器的原生事件对象。ExtEventObject的实例解决了各浏览器之间的差异。例如鼠标按钮被点击了、有按键被按下了、或者要停止事件的推进等的任务都有相应的方法参与。要将事件处理器和页面中的元素绑定在一起可以使用ExtElement的on方法。它是addListener方法的简写形式。第一个参数是要订阅的事件类型和第二个参数是准备触发的事件函数。Extfly('myEl')on('click',function(e,t){myEl有点击的动作e是这次产生的事件对象ExtEventObjectt是HTMLElement目标})ExtCore常规化了所有DOM事件的参数。事件处理器总会被送入一个常规化的事件对象(ExtEventObject)和目标元素HTMLElement。这些是用于事件处理方面的API:•addListeneron为此元素加入一个事件处理函数。on()是其简写方式。简写方式作用等价写代码时更省力。varel=Extget('elId')elon('click',function(e,t){e是一个标准化的事件对象(ExtEventObject)t就是点击的目标元素这是个ExtElement对象指针this也指向t})•removeListenerun从这个元素上移除一个事件处理函数。un()是它的简写方式。varel=Extget('elId')elun('click',thishandlerFn)或elremoveListener('click',thishandlerFn)•ExtEventObjectEventObject呈现了统一各浏览器的这么一个事件模型并尽量符合WC的标准方法。e它不是一个标准的事件对象而是ExtEventObject。functionhandleClick(e){epreventDefault()vartarget=egetTarget()}varmyDiv=Extget('myDiv')myDivon("click",handleClick)或ExtEventManageron('myDiv','click',handleClick)ExtEventManageraddListener('myDiv','click',handleClick)高级事件功能事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容ExtCore在此方面提供了一系列的配置选项。•委托delegation减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处其基本要义是:并不是集合内的每一个元素都要登记上事件处理器而是在集合其容器上登记一次便可这样产生了中央化的一个事件处理器然后就有不断循环该事件周期使得逐层上报机制付诸实现只要在容器层面定义就可以。这不是说要求我们在body元素挂上一个全局的事件这会导致页面内的任何动作都会触发那个事件无疑很有可能会带来反效果的我们想提升效能却会更慢……因此我们说适用的场景应该像是下拉列表、日历等等这样拥有一群元素的控件直接或间接地体现在一个容器身上的那么一个控件。下面一个大的ul元素为例子:以装饰作示例:<ulid='actions'><liid='btnedit'><li><liid='btndelete'><li><liid='btncancel'><li><ul>不是登记一个处理器而是为逐个列表项(listitem)都登记:Extfly('btnedit')on('click,function(e,t){执行事件具体过程})Extfly('btndelete')on('click,function(e,t){执行事件具体过程})Extfly('btncancel')on('click,function(e,t){执行事件具体过程})要使用事件委托的方式代替在容器身上登记一个事件处理器按照依附的逻辑选择:Extfly('actions')on('click,function(e,t){switch(tid){case''btnedit':处理特定元素的事件具体过程breakcase'btndelete':处理特定元素的事件具体过程breakcase'btncancel':处理特定元素的事件具体过程break}})基于dom各层经过逐层上报的原因可以说我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令跳到对应匹配的元素那部分代码。这样方法具备可伸缩性因为我们只要维护一个函数就可以控制那么多的元素的事件。•委托化delegate你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符用于过滤目标元素或是往下一层查找目标的子孙。elon('click',function(e,t){执行事件具体过程},this,{对子孙'clickable'有效delegate:'clickable'})•翻转hover这是一个Ext的翻转菜单的实例:handleswhenthemouseenterstheelementfunctionenter(e,t){ttoggleClass('red')}handleswhenthemouseleavestheelementfunctionleave(e,t){ttoggleClass('red')}subscribetothehoverelhover(over,out)•移除事件句柄removeAllListeners在该元素身上移除所有已加入的侦听器。elremoveAllListeners()•是否一次性触发single你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。elon('click',function(e,t){执行事件具体过程},this,{single:true触发一次后不会再执行事件了})•缓冲buffer你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到ExtutilDelayedTask延时之后才执行。如果事件在那个事件再次触发则原处理器句柄将不会被启用但是新处理器句柄会安排在其位置。elon('click',function(e,t){执行事件具体过程},this,{buffer:重复响应事件以一秒为时间间隔})•延时delay你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。elon('click',function(e,t){执行事件具体过程},this,{延迟事件响应事件后开始计时(这里一秒)delay:})•目标target你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。elon('click',function(e,t){执行事件具体过程},this,{遇到里头的第一个'div'才会触发事件target:elup('div')})尺寸大小某个元素在页面上我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外下ExtCore也把这些任务抽象为清晰的API供大家使用。这些都是setter的方法可传入动画的配置参数或即就是以个布尔型的true表示这是默认的动画。我们来看一看:设置高度为px以默认配置进行动画Extfly('elId')setHeight(,true)设置高度为px以自定义的配置进行动画Extfly('elId')setHeight(,{duration:,动画将会持续半秒动画过后改变其内容为“结束”callback:function(){thisupdate("结束")}})拉出Firebug检测一下元素(右击后选择元素“InspectElement”)观察右方的面板并点击“layout”您应会看到这样:这块地方提供的信息足够清楚显示有关该元素的所有尺寸。从中得知当前元素宽px、高px、px的内边距、px的边框和px的外边距。不过这些信息亦可从ExtCore的ExtElement的API查询得知!vardimSz=Extget('dimsizing')varpadding=dimSzgetPadding('lrtb')返回px的值varborder=dimSzgetBorderWidth('lrtb')返回px的值varheight=dimSzgetHeight()返回px的值varwidth=dimSzgetWidth()返回px的值把代码弄进Firebug调试看看有否这样的结果?实际上用这些set的方法改变高度或宽度后就可立即在firebug的layout面板看到的。(注意:if如果对图片设置其不同大小的高度或宽度那就是浏览器的尺寸

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/13
仅支持在线阅读

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部