Extjs DOM操作的幾個類


Extjs提供了非常完善的DOM操作方法,可以方便的操作DOM。另外Extjs還可以方便的查詢DOM元素,並把這些DOM元素封裝成Ext.Element對象,通過Element對象我們可以操作DOM元素。下面來看一下Extjs操作DOM的幾個類:

Ext.Element 、Ext.DomHelper、Ext.DomQuery三個支柱性庫

 

Ext.Element

Ext.Element.get()快捷方式Ext.get(),只能以dom的id作為參數去獲取Ext.Element對象(Ext.get返回的結果是Ext.Element對象的實例, .dom才是原生的dom)。在Ext中所有組件都是有Id的,這個Id可以是手動指定,也可以是Ext的Id生成機制自動生成。

Ext.DomHelper

主要是操作dom。

Ext.DomHelper.append()是一個很常用的方法,值得一提的是由於Ext采用了對象緩存機制,在MVC模式下在不同的tab切換的時候如果重新渲染dom,使用Ext.DomHelper.append()添加的元素不會丟失,但是使用原生或者其他框架(比如jq)就會丟失。這就是我說她像一個的老婆原因之一。看幾個用法:

一、直接字符串

Ext.DomHelper.append(元素id,'<a href="#">你好</a>');

二、對象

Ext.DomHelper.append(元素id,{tag:ul,children:[{tag:li,html:'一個ul列表的第一項'},{...}]});

Ext.DomHelper.insertHtml()另一個很常用的方法

Ext.DomHelper.insertHtml(位置參數,dom,'<a href="#">你好</a>');

位置參數:beforeBegin、afterBegin、beforeEnd、afterEnd

Ext.DomHelper.overwrite(dom的id,'<a href="#">你好</a>');相當於原生的 .innerHtml="";所以是重寫容器中的內容。

var tpl = Ext.DomHelper.createTemplate("<li>{content}</li>");

tpl.overwrite(domID,{content:'內容'});

引用文件有問題,會報錯

還有另一種用法:

var tpl = new Ext.DomHelper.createTemplate({tag:"li",html:"{content}"});,同樣的報錯...哪位大神路過望指點

如果是列表,那就要借助for循環append了。

Ext.DomQuery 查找dom元素的利器

Ext.query('div')、Ext.query('[id="domId"]')、Ext.query('div:first-child').支持絕大部分的CSS3選擇器

Ext.query() 是Ext.DomQuery.select()的快捷方式, 返回標准dom。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM