,,ExtJs使用总结(非常详细)

EXT的使用总结(很详细)，有需要的朋友可以参考一下。

一、获取元素（Getting Elements）1.ext . get var El=ext . get(' my elementid ')；//获取元素，相当于document . getelementbyid(' myElementID ')；//2.ext.flyvar el=ext.fly('我的元素id ')会被缓存。//不需要缓存。注意：Flyweight设计模式是一种节省内存的模式。这种模式的一般原则是创建一个单一的整体对象，然后重复使用它。3.ext . getdom var elDom=ext . getdom(' elId ')；//根据id检查dom节点var elDom 1=ext . getdom(elDom)；//根据dom节点检查dom节点

二、CSS元素4 . addclass ext . fly(' elId ')。add class(' myCls ')；//添加元素5.radioclassext.fly ('elid ')的' myCls '样式。radio class(“mycls”)；//向此元素添加一个或多个className，并移除其所有同级节点上同名的样式。6.removeClass Ext.fly('elId ')。remove class(' myCls ')；//移除元素7的样式。切换类ext.fly ('elid ')。切换类(“mycls”)；//添加样式ext.fly ('elid ')。切换类(“mycls”)；//移除样式ext.fly ('elid ')。切换类(“mycls”)；//添加样式8。Hasclassif(分机。fly ('elid ')。has class(' mycls '){//确定此样式是否已添加//已样式化…} 10。Replaceclass ext。fly ('elid ')。Replaceclass ('myclsa '，')。//替换样式11。getstylevarcolor=ext.fly ('elid ')。get style(' color ')；//返回该元素统一的当前样式和计算样式。var zIndx=Ext.fly('elId ')。get style(' z-index ')；//返回该元素统一的当前样式和计算样式。12.setStyle Ext.fly('elId ')。setStyle({ display : 'block '，overflow : 'hidden '，cursor:' pointer ' })；//设置元素的样式。也可以用一个对象参数包含多个样式。13.getColor Ext.fly('elId ')。getColor(' color ')；//返回指定CSS属性的CSS color 14.setOpacity

Ext.fly('elId ')。seto capacity(. 45，真)；//设置元素的透明度。15.clearOpacity Ext.fly('elId ')。clear opacity()；//清除此元素的透明度设置

三、Dom游历16.Ext.fly('elId ')。select(' Li:n-child(2n)')。add class(“red”)；17.is测试当前元素是否与传入的选择器一致。复制代码如下：var El=ext . get(' elId ')；if(El . is(' p . mycls '){//条件成立} 18.findParent位于该节点，以该节点为起点在外围搜索外层的父节点。搜索标准必须符合并匹配传入的简单选择器。Ext.fly('elId ')。find parent(' div ')；//返回dom节点ext.fly ('elid ')。findparent ('div '，4)；//查找4个节点ext.fly ('elid ')。findparent ('div '，null，true)；//返回该节点位于Ext的“父节点”。元素19.findParentNode，并从该节点的“父节点”中搜索外部“父”节点。搜索条件必须与传入的简单选择器匹配。Ext.fly('elId ')。find parent node(' div ')；20.up沿着DOM向外围搜索外部的“父-父”节点，搜索条件必须满足并匹配传入的简单选择器。Ext.fly('elId ')。up(' div ')；Ext.fly('elId ')。up('div '，5)；//限于5级内部搜索。21.select .传入一个CSS选择器的参数，然后根据这个CSS选择器从当前元素下面形成一组期望匹配的子节点，也就是“选择”的操作，最后作为Ext.CompositeElement类型的复合元素返回.如果调用Ext.select()表示可以从document中搜索，//返回复合元素ext.fly ('elid ')。选择结果(' div:n-child(2)')；//返回数组ext.fly ('elid ')。select(' div:n-child(2)'，true)；//整个文档都会搜索ext . select(' div:n-child(2)')；query对query进行查询，并返回一个DOM节点数组。可选的第二个参数被设置为查询的起点；如果未指定，则为文档。//返回dom节点Ext.query的数组(' div:n-child(2)')；23 .子节点根据输入的选择器进行搜索，不限制深度，如果匹配就选择一个子节点。Ext.fly('elId ')。child(' p . highlight ')；//返回的类型是ext.elementext.fly ('elid ')。Child ('p.highlight '，true)；//返回dom node 24.down基于此选择器，“直接”选择一个子节点。Ext.fly('elId ')。向下(' span ')；//返回的类型是ext.elementext.fly ('elid ')。down ('span '，true)；//返回dom节点

parent返回当前节点的父节点，可选地带有一个期望的选择器。//返回父节点，类型为ext.elementext.fly ('elid ')。parent()；//返回父节点，父节点的类型为htmldomext.fly ('elid ')。Parent(' '，true)；//返回父节点，但必须是div的。如果找到了，就会归还。类型为ext.elementext.fly ('elid ')。父级(“div”)；26.next获取下一个边节点，跳过文本节点。可选地，可以输入所需的选择器。//返回ext.elementext.fly类型的下一个边节点(' elid ')。next()；//返回HTMLDOM ext.fly类型的下一个侧节点(' elid ')。下一个('，true)；//返回下一个边节点，但必须是div的。当它被找到时，它将被归还。类型为ext.elementext.fly ('elid ')。next(' div ')；prev获取前一个边节点并跳过文本节点。可选地，可以输入所需的选择器。//返回上一个端节点，类型为ext.elementext.fly ('elid ')。prev()；//返回前一个侧节点，类型为HTMLDomext.fly ('elid ')。prev('，true)；//返回上一个边节点，但必须是div的。当它被找到时，它将被归还。类型为ext.elementext.fly ('elid ')。prev(' div ')；28 .首先获取第一个边节点，跳过文本节点。可选地，可以输入所需的选择器。//返回ext.elementext.fly类型的第一个边节点(' elid ')。first()；//返回第一个边节点，类型为htmldomext.fly ('elid ')。第一('，真)；//返回第一个边节点，但必须是div的。当它被找到时，它将被归还。类型为ext.elementext.fly ('elid ')。first(' div ')；获取最后一个边节点并跳过文本节点。可选地，可以输入所需的选择器。//返回ext.elementext.fly类型的最后一个边节点(' elid ')。last()；//返回HTMLDomext.fly类型的最后一个边节点(' elid ')。Last('，true)；//返回最后一个边节点，但必须是div的。当它被找到时，它将被归还。类型为ext.elementext.fly ('elid ')。last(' div ')；

四、DOM操控（DHTML常见的一项任务就是DOM元素的增、删、改、查）30.AppendChild将input元素分类为该元素的子元素。var El=ext . get(' elid 1 ')；//指定ext.fly ('elid ')。id为的appendchild(“elid 2”)；//Ext。Element Add Ext.fly('elId ')。appendChild(El)；//选择器添加ext.fly ('elid ')。appendchild (['elid2 '，' elid3'])的组合；//直接添加dom节点ext.fly ('elid ')。appendchild(El . DOM)；//添加CompositeElement，一组div ext.fly ('elid ')。appendchild(ext . select(' div '))；31.appendTo将这个元素添加到输入元素中。var El=ext . get(' elid 1 ')；//'elId '被添加到' elId2' ext.fly ('elid ')。追加到(' elid 2 ')；Ext.fly('elId ')。附录(El)；//添加到Ext。Element el 32.insertBefore传入元素的参数，并将其放在当前元素之前的位置。var El=ext . get(' elid 1 ')；DOM节点前面是ext.fly ('elid ')。在前面插入(' elid 2 ')；//Ext。Element el insert ext.fly ('elid ')。在前面插入before(El)；33.insertAfter传入一个元素的参数，并将其放在当前元素之后的位置。var El=ext . get(' elid 1 ')；//dom节点插入ext.fly ('elid ')。insert after(' elid 2 ')；//Ext。Element el insert Ext.fly('elId ')。insert after(El)；34.insertFirst既可以插入元素，也可以创建元素(如果要创建，请使用“DomHelper配置项对象”作为参数)。简而言之，该元素显示为当前元素的第一个子元素。var El=ext . get(' elid 1 ')；//插入的dom节点作为第一个元素ext.fly ('elid ')。insert first(' elid 2 ')；//插入的扩展名。元素作为第一个元素Ext.fly('elId ')。insert first(El)；//用DomHelper CI创建一个新节点，新节点将作为第一个子元素插入。Ext.fly('elId ')。insertFirst({ tag: 'p '，cls: 'myCls '，html: 'Hi我是新的第一个孩子' })；35.replace用于当前元素替换输入元素。var El=ext . get(' elid 1 ')；//'elId '替换' elid2' ext.fly ('elid ')。替换(' elid 2 ')；//'elId '替换' elid1' ext.fly ('elid ')。替换(El)；用传入的元素替换这个元素。参数可以是新元素或要创建的DomHelper CI对象。var El=ext . get(' elid 1 ')；Ext.fly('elId ')。replace with(' elid 2 ')；//'elId2 '替换了' elId'。ext.fly ('elid ')。替换为(El)；//'elId1 '替换' elId' //用DomHelper CI创建一个新节点，并用此节点替换' elId '。Ext.fly('elId ')。replaceWith({ tag: 'p '，cls: 'myCls '，html: 'Hi我已经替换了elId ' })；

00-五、DomHelper配置项37.createChild传入DomHelper CI对象的参数，创建它并将其添加到元素中。var El=ext . get(' elId ')；var dhConfig={ tag: 'p '，cls: 'myCls '，html: 'Hi我已经替换了elId ' }；//新建一个节点，放入‘elId’El . Create child(dhConfig)中；//新建一个节点，在el的第一个子元素el.createChild (dhconfig，el.first())之前；wrap创建一个新元素并将其环绕在当前元素周围。Ext.fly('elId ')。wrap()；//div包装elId //包装elidext.fly ('elid ')。用新创建的元素包装({tag:' p '，CLS:' mycls '，html:' hi我已经替换了elid ' })；

00-六、Html片断38.insertHtml在这个元素中插入一个Html片段。至于要插入的html在元素中的位置，您可以指定before begin、before end、after begin和after end。第二个参数是插入HTML片段，第三个参数是决定是否返回Ext.Element. Ext.fly ('elid ')类型的DOM对象。插入html(' begin之前'，' pa href=' another page . html ' click me/a/p ')；//返回dom节点ext.fly ('elid ')。inserthtml ('before begin '，' pa href=' another page . html ' click me/a/p '，true)；//返回Ext。Element 39.remove从DOM中移除当前元素，并将其从缓存中删除。Ext.fly('elId ')。移除()；//elId在缓存中没有40.removeNode和dom来移除文档的DOM节点。如果是body节点，将被忽略。ext . remove node(node)；//从dom内部移除(HTMLElement)

七、Ajax 41.Load直接访问更新程序的Ext。Updater.update()方法(相同的参数)。与参数Ext一致。Updater.update()方法。Ext.fly ('elid ')。load ({URL:' serverside.php'}) 42。获取此元素的UpdateManager。var updr=Ext.fly('elId ')。get updater()；updr . update({ URL:' http://my server . com/index . PHP '，params: { param1: 'foo '，param 2:' bar ' })；

八、事件控制Event Handling 43.addListener/on为此元素添加一个事件处理程序。On()是它的缩写。速记法相当，写代码时更省力。var El=ext . get(' elId ')；El.on ('click '，function (e，t) {//e是标准化的事件对象(Ext。EventObject) //t是被点击的目标元素，是Ext.Element. //这个也指向t}的对象指针；从44.removeListener/un元素中移除事件处理程序。Un()是它的缩写。var El=ext . get(' elId ')；el.un('click '，this . handler fn)；//或者el.removelistener ('click '，this . handler fn)；45.Ext.EventObject EventObject提出了这样一种统一所有浏览器的事件模型，并尽量符合W3C标准方法。//e它不是标准的事件对象，而是Ext。EventObject函数handle click(e){ e . prevent default()；var target=e . get target()；} var my div=ext . get(' my div ')；myDiv.on('click '，handle click)；//或者ext.eventmanager.on ('mydiv '，' click '，handle click)；延伸文件系统event manager . addlistener(' my div '，' click '，handle click)；

九、高级事件功能46.委托的委派应该被事件委派所取代。在容器上注册一个事件处理程序，根据附加的逻辑进行选择：ext.fly ('actions ')。On ('click，function (e，t){ switch(t . id){ Case ' ' BTN-编辑':/Case 'btn-delete': //处理特定元素中断事件的具体过程；Case 'btn-cancel': //处理特定元素中断事件的具体过程；} });

47.委派委派。您可以在注册事件的处理器时添加此选项。一个简单的选择器用于过滤目标元素或查找下一级目标的后代。El.on('click '，function(e，t) {//执行事件的具体过程}，this，{//有效委托：'。后代可点击' })；48.Flip hover这是一个Ext flip菜单的例子：//Handles当鼠标进入元素函数Enter (e，t){ t . toggle class(' red ')；} //鼠标离开元素时的处理函数leave(e，t){ t . toggle class(' red ')；} //订阅hover el.hover(over，out)；49.移除事件句柄removeAllListeners移除已加入此元素的所有侦听器。El . remove all listeners()；50.是否一次性触发单身。您可以在注册事件处理器时添加此选项。True表示添加一个处理程序，该处理程序将在下次事件触发后移除自身。El.on('click '，function(e，t) {//执行事件的具体过程}，this，{single: true //事件被触发一次就不再执行})；51.buffer Buffer您可以在注册事件的处理器时添加此选项。如果指定毫秒，处理函数将被安排在扩展后执行。util.delayedtask延迟。如果在该事件中再次触发该事件，将不会启用原始处理器句柄，但新的处理器句柄将被安排在它的位置。El.on('click '，function(e，t) {//执行事件的具体过程}，this，{buffer: 1000 //重复响应事件以一秒为时间间隔})；52.延迟延迟您可以在注册事件的处理器时添加此选项。设置触发事件后处理功能的延迟时间。El.on('click '，function(e，t) {//执行事件的具体过程}，this，{//延迟事件，响应事件后开始计时(此处一秒)延迟：1000 })；53.目标目标您可以在注册事件的处理器时添加此选项。如果要指定另一个目标元素，可以在此配置项上设置它。这确保了在事件升级阶段遇到该元素之前，不会执行该处理功能。复制代码如下：el.on('click '，function(e，t) {//执行事件的具体流程}，this，{//里面的第一个' div '会触发事件目标：El . up(' div ')})；

十、尺寸大小54.GetHeight返回元素的偏移高度。var ht=Ext.fly('elId ')。getHeight()；getWidth返回元素的偏移宽度。var wd=Ext.fly('elId ')。getWidth()；设置元素的高度。Ext.fly('elId ')。setHeight()；设置元素的宽度。Ext.fly('elId ')。setWidth()；返回指定边的填充宽度。var bdr_wd=Ext.fly('elId ')。getBorderWidth(' lr ')；59.getPadding可以是t，l，r，b或者任意组合。例如，传入lr的参数将获得(l)eft packing(r)right填充。var padding=Ext.fly('elId ')。get padding(' lr ')；60.clip保存当前溢出，然后裁剪元素的溢出部分——使用invocate()将其移除。Ext.fly('elId ')。clip()；61 .在调用clip()之前，invoke返回原始裁剪部分(溢出)。Ext.fly('elId ')。松开()；62.isBorder Box测试不同的CSS规则/浏览器，确定元素是否使用Border Box。if (Ext.isBorderBox) { //}

十一、定位

getX返回元素相对于页面坐标的x位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。Var elx=ext.fly ('elid ')。getx () 64。gety返回元素相对于页面坐标的Y位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。Var ely=ext.fly ('elid ')。gety () 65。getxy返回元素当前页面坐标的位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。Var elxy=ext.fly ('elid ')。Getxy ()//elxy是返回元素相对于页面坐标的x位置的数组66.setX。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。Ext.fly ('elid ')。setx (10) 67。sety返回元素相对于页面坐标的Y位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。Ext.fly ('elid ')。塞提(10) 68。setxy返回元素当前页面坐标的位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。Ext.fly ('elid ')。setxy ([20，10]) 69。GetOffsets返回当前元素和输入元素之间的距离。这两个元素都必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。var elOffsets=Ext.fly('elId ')。getOffsetsTo(another El)；70.getLeft获取左边的x坐标。var elLeft=Ext.fly('elId ')。get left()；71.getRight获取元素右侧的x坐标(元素在x位置的宽度)。var elRight=Ext.fly('elId ')。getRight()；getTop得到顶部的Y坐标。var elTop=Ext.fly('elId ')。getTop()；73.getBottom获取元素的底部Y坐标(元素在Y位置的宽度)。var elBottom=Ext.fly('elId ')。getBottom()；74.setleft直接使用CSS style(而不是setX())来设置元素的左边位置。Ext.fly ('elid ')。setleft (25) 75.setright设置元素CSS Right的样式。Ext.fly ('elid ')。setright (15) 76。Settop直接使用CSS style(而不是setY())来设置元素的顶部位置。Ext.fly ('elid ')。settop (12) 77.setbottom设置CSS Bottom元素的样式。Ext.fly ('elid ')。setbottom (15) 78.setlocation无论这个元素如何定位，都要设置它在页面上的坐标位置。元素必须是DOM树的一部分才能有页面坐标(显示：无或未添加的元素将返回false作为无效)。Ext.fly ('elid ')。setlocation (15，32)79 . move无论这个元素如何定位，都要设置它在页面上的坐标位置。元素必须是DOM树的一部分才能有页面坐标(显示：无或未添加的元素将返回false作为无效)。Ext.fly ('elid ')。80.position初始化元素的位置。如果没有传入预期的位置，并且它还没有被定位，则当前元素将被设置为相对位置。Ext.fly ('elid ')。位置(“相对”)81。Clearpositioning清除位置，并在加载文档时将其重置为默认值。Ext.fly ('elid ')。clear positioning()ext . fly(' elid ')。清晰定位(“顶部”)82。getpositioning返回一个包含CSS定位信息的对象。有用的提示：与setPostioning一起，您可以在执行更新之前拍摄快照，然后可以恢复元素。Var=ext.fly ('elid ')。getPositioning () 83。setpositioning由getpositioning()返回的对象定位。Ext.fly ('elid ')。设置定位({left:' static '，right:' auto'}) 84。翻译点。发送一个页面坐标参数，并将其转换为元素的CSS左/上值。//{left:translX，top:translY } var points=ext . fly(' elId ')。translatePoints(15，18)；

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读