ExtJS DOM操作-查询（DOM Query）

更新记录

点击查看代码

2022年12月3日 优化select内容。
2022年7月20日 发布。
2022年7月6日  从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

DOM操作-查询（DOM Query）

说明

DOM常用查询方法：get、query、select、fly

查询单个DOM元素-Ext.get()

Ext.get(id /HTML DOM) : Ext.dom.Element

说明：通过DOM元素的id属性，获得DOM元素
返回值：返回Ext.dom.Element类的实例
注意：Ext.get方法是Ext.dom.Element.get方法的快捷方法
注意：这是用来查询DOM的，不是查询组件的
注意：参数的id字符串不需要使用#开头
实例：

<input type="text" id="txtFirstName" />
// 获得DOM元素Ext.dom.Element object
var txtFirst = Ext.get("txtFirstName");
// 设置HTML属性
txtFirst.set({ 'value': 'Steve' });

查询单个DOM元素-Ext.fly()

Ext.fly (dom, [named] ) : Ext.dom.Element 

说明：执行类似Ext.get()方法的功能，都是获得DOM元素
被设计成将DOM元素作为单个语句进行操作，并且不在内存中存储引用
而Ext.get存储DOM元素的引用，可以在其他地方继续使用
注意：第一个参数是dom元素或者dom元素的id
注意：如果没有匹配到dom元素则会，返回null
注意：Ext.fly()是Ext.dom.Element.fly()的快捷别名方法

实例：

<input type="text" id="txtLastName" /> 
// 获得DOM元素 并 设置HTML属性
Ext.fly('txtLastName').set({ 'value': 'Jobs' });

查询单个DOM元素-Ext.getDom (el )

Ext.getDom ( el ) : HTMLElement 

注意：参数el可以是String/HTMLElement/Ext.dom.Element类型
说明：可以通过该函数实现将ExtJS DOM转为HTML DOM
实例：
//通过dom的id属性获得元素

var elDom = Ext.getDom('elId');
//通过dom节点获得dom节点
var elDom1 = Ext.getDom(elDom);

查询多个DOM元素-Ext.select()

Ext.select ( selector, composite ) : Ext.dom.CompositeElementLite/Ext.dom.CompositeElement

说明：通过CSS选择器、XPath查询方法（CSS/XPath selector）获得多个DOM元素
返回一个Ext.dom.CompositeElement类 或 Ext.dom.CompositeElementLite类 的实例
注意：返回类型是一个集合类型，可以进行遍历操作
注意：CompositeElement具有过滤、迭代和执行集合操作的方法
注意：Ext.Select()方法是Ext.dom.Element.select()方法的快捷别名方法
注意：这个方法和Ext.query方法类似，但是返回的类型不同

实例：
简单使用

var pandaSelect = Ext.select('#id1');

使用复杂的CSS选择器

Ext.select('div.row[title=bar]:first')

选中元素并设置宽度

Ext.select('div.row').setWidth(100);

选中多个元素

Ext.select('div.row, span.title');

设置搜索的根起点

Ext.select('div.row', true, 'myEl');

或者

Ext.get('myEl').select('div.row');

选择第3个元素

var dataPackageEl = Ext.select('ul#whats-new li').item(2);

查询多个DOM元素-Ext.query()

说明：通过CSS选择器（CSS selector）语法选择多个DOM元素
Ext.query ( selector, [asDom] ) : HTMLElement[]/Ext.dom.Element[]
返回值： 返回一个数组（HTMLElement[]/Ext.dom.Element[]）
如果没有查找到元素则返回空数组
注意：返回的是非ExtJS封装的DOM元素
注意：这里是CSS选择器，而不是ExtJS类似CSS语法
注意：还可以指定查询的DOM根节点
注意：Ext.query()方法是Ext.dom.Element.query()方法的快捷别名方法

实例：
使用简单的CSS选择器

<div class="panda1">1</div>
<div class="panda1">2</div>
<div class="panda1">3</div>

var panda =  Ext.query('.panda1');
console.log(panda);

设置查找的根节点（root）

//创建组件
var btn = Ext.create('Ext.button.Button',{
    text: 'PandaButton',
    renderTo: Ext.getBody()
});
//获得组件的DOM元素
var dom = btn.getEl().dom;
var queryResult = Ext.query('span.x-btn-inner',dom);

DOM操作-删除

移除DOM节点- Ext.removeNode()

Ext.removeNode ( node )

Ext.dom.Helper

说明：Ext.dom.Helper类用于创建DOM元素
使用特定的HTML属性，比如tag、子元素、class等创建DOM元素

以下是支持的属性：
属性 描述
Tag HTML tag of the element to create
Children or cn an array of the same type of element definition of tags
Cls The class attribute of an element
Html innerHTML value of the element
Id The id of the element

实例：

Ext.dom.Helper.append('div1',{
    id: 'PandaId1',
    cls: 'PandaClass',
    html: '<h1>PandaH1</h1>'
});

Ext.dom.Query()

支持 CSS选择器 和 XPath查询语法
返回类型：Ext.CompositeElementLite集合
注意：Ext.dom.Query是一个单例类型，不需要实例化

实例：

Ext.dom.Query.select('#main .menu ul li');

Ext.getElementById()

Ext.DomHelper

实例：创建DOM元素

var h1 = Ext.DomHelper.createDom({
    tag: "h1",
    html: "This is the title!"
});

Ext.getBody().appendChild(h1);

实例：创建DOM元素，并添加到body中

Ext.DomHelper.append(Ext.getBody(),{
    tag: "div",
    style: {
        width: "100px",
        height: "100px",
        border: "2px solid #333",
        margin : "20px auto"
    }
});

实例：创建多层级的DOM元素，添加到body中

Ext.DomHelper.append(Ext.getBody(),{
    tag: "div",
    style: {
        width: "100px",
        height: "100px",
        border: "2px solid #333",
        margin : "20px auto"
    },
    children : [{
        tag : "ul",
        children : [
            {tag: "li", html: "Item 1"},
            {tag: "li", html: "Item 2"}
        ]
    }]
});