`

[转载]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方法
分享到:
评论

相关推荐

    EXT核心API详解

    EXT核心API详解 1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 ...

    Ext API详解--笔记

    `EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt`涵盖了查询DOM元素的`Ext.DomQuery`(类似于jQuery的selector),动态创建和操作DOM的`DomHelper`,以及用于数据绑定的`Template`类。这些工具使你能更加...

    ext核心api详解(2)

    EXT 核心 API 详解(四) - Ext.DomQuery/DomHelper/Template EXT JS 是一个专注于构建前端用户界面的JavaScript框架,它独立于后台技术,主要利用Ajax技术实现丰富的交互效果。本文将深入探讨EXT JS的核心API,特别...

    整理的Ext API详解

    "EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt"介绍了Ext.DomQuery,这是一个高效的DOM选择器引擎,类似于jQuery的$.selector。DomHelper则是用于创建和操作DOM结构的工具,而Template则是用于动态生成...

    EXT核心API详解(第一部分)

    5. **EXT核心API详解(三)-Ext.DomQuery DomHelper Template**:这部分主要涉及DOM查询、DOM辅助器和模板。`Ext.DomQuery`(简称`$`)类似于jQuery的`select`,用于高效地选取DOM节点,支持XPath和CSS选择器。`Ext....

    EXT核心API详解.doc

    EXT核心API详解主要涵盖了一系列与EXT.js库相关的类和对象,EXT.js是一个强大的JavaScript UI框架,用于构建富客户端Web应用程序。以下是对各个类的详细解释: 1. **Ext类**:EXT库的基础类,提供了许多实用的方法...

    extjs核心api详解

    四、Ext.DomQuery/DomHelper/Template Ext.DomQuery允许开发者使用类似CSS选择器的语言来查询DOM元素,而DomHelper提供了一系列工具方法来创建、插入、更新和删除DOM元素。Template则是一种用于动态生成HTML的模板...

    extapi

    "EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt"介绍了Ext.DomQuery,这是一个强大的CSS选择器引擎,类似于jQuery的选择器,用于高效地选取DOM元素。DomHelper则是一个便捷的DOM元素构建工具,可以生成...

    extjs核心api详解.doc

    4. **Ext.DomQuery/DomHelper/Template**:DOM查询工具帮助开发者高效地查找DOM元素,DomHelper则提供了一种创建和修改DOM结构的简便方式,而Template允许创建可复用的HTML模板。 5. **Ext.Fx**:这部分涉及EXT的...

    extjs实例说明详解

    在“EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt”中,你可以学习到如何使用这些工具来提升DOM操作的效率。 5. **Ext.Fx**:这是ExtJS的动画模块,提供了多种动画效果,如淡入淡出、移动、缩放等。在...

    extjs学习资源

    Ext.DomQuery/DomHelper/Template - **DOM查询**: `Ext.DomQuery`提供了类似jQuery的语法来选择DOM元素。 - **模板引擎**: `Ext.Template`允许开发者使用模板字符串创建HTML,并可以方便地插入数据。 ```...

    EXTJS___API详解

    其API详解涵盖了众多核心类和组件,使得开发者能够灵活地创建复杂的用户界面。以下是一些主要知识点的详细说明: 1. **Ext 类**:这是EXTJS的基础类,提供了许多实用的静态方法,如Ext.apply()用于对象属性的合并,...

    extjs帮助文档

    ### ExtJS核心API详解 #### 一、Ext类(第2页) - **概述**:Ext类是ExtJS的核心基础类之一,它提供了一系列用于简化DOM操作和浏览器兼容性问题的方法。 - **常用方法**: - `Ext.isEmpty(value)`:检查给定值是否...

    extjs帮助文档pdf版

    ### ExtJS核心API详解 #### 1. Ext 类 (P.2) - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用...

    精通JS脚本之ExtJS框架.part1.rar

    6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2...

    精通JS脚本之ExtJS框架.part2.rar

    6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2...

Global site tag (gtag.js) - Google Analytics