EXT核心API詳解(四)-Ext.DomQuery/DomHelper/Template

Ext.DomQuery類

selector文法詳見Ext類

compile( String selector, [String type] ) : Function

編寫一個選擇器或xpath查詢到一個方法以友善重用,type取select(預設)或simple值之一

filter( Array el, String selector, Boolean nonMatches ) : Array

過濾el中的元素,保留符合selector的，如果nonMatches為真，結果相反

is( String/HTMLElement/Array el, String selector ) : Boolean

驗證el是否比對selector

select( String selector, [Node root] ) : Array

從root中選擇比對selector的對象數組

selectNode( String selector, [Node root] ) : Element

傳回root中第一個比對selector的對象

selectNumber( String selector, [Node root], Number defaultValue ) : Number

傳回root中第一個比對selector的對象的節點值，轉換為整數或浮點數

selectValue( String selector, [Node root], String defaultValue ) : void

傳回root中第一個比對selector的對象的節點值，如果為null,用預設值defaultValue代替

Ext.DomHelper類

append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element

建立一個新的DOM元素并添加到el

參數 o 是一個DOM對象或一個原始html塊

applyStyles( String/HTMLElement el, String/Object/Function styles ) : void

應用樣式styles到對象el， 樣式的對象表示方法見Ext.Element

createTemplate( Object o ) : Ext.Template

由o建立一個新的Ext.Template對象，詳見 Ext.Template

insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element

insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element

建立一個新的DOM對象o并将他們挺入在el之後/之前

insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :

建立一個新的DOM元素并做為第一個子節點添加到el (看了這個insertFirst，建議将append取一個别名insertLast:))

insertHtml( String where, HTMLElement el, String html ) : HTMLElement

where 可選值beforeBegin/afterBegin/beforeEnd/afterEnd

将html代碼插入到el附近,

markup( Object o ) : String

傳回DOM對象o對應的html代碼

overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :

建立一個新的DOM元素o并用它重寫el的内容

Ext.Template類

Template類主要是功能是生産html片斷,例

var t = new Ext.Template(

    '<div name="{id}">',

        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',

    '</div>'

);

t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

公用方法:

Template( String/Array html )

構造一個Ext.Template對象，參數可以是字元串形式的html代碼或它們組成的數組，

Template.from( String/HTMLElement el, Object config ) : Ext.Template

能過el的value(優先)或innerHTML來構造模闆

append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

insertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

insertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

insertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

這組方法提供由 value産生的html 代碼，并添加到dom 做為el的最後一個子節點/下一個兄弟節點/前一個兄弟節點/第一個子節點

values解釋參見applyTemplate

apply() : void

applyTemplate( Object values ) : String

apply是applyTemplate的簡寫，如果參數是數字values可以是一個數組，或者一個象 {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}這樣的json對象

compile() : Ext.Template

編譯模闆,替換掉模闆中的\=>\\ ,\r\n|\n==>\\n, '=\',主要是為了js自己處理友善

overwrite( Mixed el, Object values, [Boolean returnElement] ) :

利用values生成html替換el的内容

set( String html, [Boolean compile] ) : Ext.Template

設定模闆的html,如果compile為真将調用compile方法