`
kc_ren
  • 浏览: 62119 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext.DomQuery

阅读更多
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详解

    7、Ext.Element类 ………………………… 7 8、Ext.DomQuery类 ………………… 13 9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext...

    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,特别...

    ExtJS入门教程(超级详细)

    7、Ext.Element类 ………………………… 7 8、Ext.DomQuery类 ………………… 13 9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext...

    extjs帮助文档

    - `Ext.DomQuery.selectNode(selector, context)`:选择符合指定CSS选择器的第一个元素。 #### 九、Ext.DomHelper类(第14页) - **概述**:Ext.DomHelper类提供了一组用于创建、插入和更新DOM节点的方法。 - **...

    Ext Js权威指南(.zip.001

    6.1 ext js的选择器:ext.domquery / 215 6.1.1 选择器的作用 / 215 6.1.2 使用ext.query选择页面元素 / 215 6.1.3 基本选择符 / 223 6.1.4 属性选择符 / 229 6.1.5 css属性值选择符 / 234 6.1.6 伪类选择符 ...

    EXT核心API详解.doc

    8. **Ext.DomQuery类**:快速高效的DOM选择器引擎,类似于jQuery的选择器功能。 9. **Ext.DomHelper类**:用于创建和修改DOM元素的工具类,提供了更简洁的API。 10. **Ext.Template类**:模板类,可以用来生成动态...

    extjs核心api详解

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

    extjs帮助文档pdf版

    - `Ext.DomQuery.selectNode(node, selector)`: 在指定节点下选择符合指定条件的DOM元素。 - `Ext.DomQuery.selectNodes(node, selector)`: 选择多个符合条件的DOM元素。 #### 9. Ext.DomHelper 类 (P.14) - **...

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

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

    extapi

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

    整理的Ext API详解

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

    ExtJS 设计模式之一.docx

    通过这种方式,ExtJS确保了像`Ext.DomHelper`和`Ext.DomQuery`这样的工具类在整个应用中只被初始化一次,从而提高了性能并减少了内存消耗。 #### 四、单例模式的优点 - **唯一性**:确保在整个应用中只有一个实例...

    extjs学习资源

    var els = Ext.DomQuery.select('.some-class'); ``` ##### 5. Ext.Fx - **动画效果**: `Ext.Fx`提供了一系列的动画效果,可以用来增强用户界面的交互体验。 - **方法示例**: 如`Ext.Fx.run()`可以运行一组动画...

    EXT JS 3.0 Core Class Diagram

    4. `Ext.DomQuery`: 用于高效地选择DOM元素的工具,类似于jQuery的`$`。 - `matchers`, `pseudos`: 匹配规则和伪类选择器。 - `compile()`: 编译查询表达式。 - `filter()`: 过滤元素集合。 - `is()`: 检查元素...

    Extjs常用函数和事件.pdf

    `Ext.DomQuery`:提供类似于jQuery的选择器功能,如编译CSS选择器,过滤元素,检查元素是否匹配选择器,以及选择和选择单个节点。 24-27. `Ext.util.CSS`:CSS操作工具,包括创建样式表,获取CSS规则,交换样式表...

    EXTJS___API详解

    8. **Ext.DomQuery 类**:类似于jQuery的选择器,用于高效地选择DOM元素。 9. **Ext.DomHelper 类**:用于动态创建和修改DOM元素,提供了一种模板化的创建方式。 10. **Ext.Template 类**:模板引擎,用于动态生成...

    extjs实例说明详解

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

Global site tag (gtag.js) - Google Analytics