Extjs DOM操作总结[转]

Extjs DOM操作总结[转]
一、获取元素（Getting Elements）

1.Ext.get

var el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存

2. Ext.fly

var el = Ext.fly('myElementId')//不需要缓存。

注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。

3.Ext.getDom
var elDom = Ext.getDom('elId'); // 依据id来查dom节点
var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom节点

二、CSS元素

4.addClass
Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式

5.radioClass

Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。

6.removeClass

Ext.fly('elId').removeClass('myCls'); // 移除元素的样式

7.toggleClass

Ext.fly('elId').toggleClass('myCls'); // 加入样式
Ext.fly('elId').toggleClass('myCls'); // 移除样式
Ext.fly('elId').toggleClass('myCls'); // 再加入样式

8.hasClass

if (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式
// 是有样式的……
}

10.replaceClass

Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式

11.getStyle

var color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。
var zIndx = Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。

12.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'

});//设置元素的样式，也可以用一个对象参数包含多个样式。

13.getColor

Ext.fly('elId').getColor('color');//为指定的CSS属性返回CSS颜色

14.setOpacity

Ext.fly('elId').setOpacity(.45, true);//设置元素的透明度。

15.clearOpacity

Ext.fly('elId').clearOpacity();//清除这个元素的透明度设置

三、Dom游历

16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red');

17.is 测试当前元素是否与传入的选择符相符一致。
```
var el = Ext.get('elId');
if (el.is('p.myCls')) {
	// 条件成立
}
```
18.findParent

定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符。
```
Ext.fly('elId').findParent('div'); // 返回dom节点
Ext.fly('elId').findParent('div', 4); // 查找4个节点
Ext.fly('elId').findParent('div', null, true); // 返回Ext.Element
```
19.findParentNode
定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。
```
Ext.fly('elId').findParentNode('div');
```
20.up
沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。
```
Ext.fly('elId').up('div');
Ext.fly('elId').up('div', 5); // 限5层的内查找
```
21.select
传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是“选择”的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document可是搜索。
```
// 返回结果的CompositeElement
Ext.fly('elId').select('div:nth-child(2)');
// 返回数组
Ext.fly('elId').select('div:nth-child(2)',
    true);

// 整个document都会搜索
Ext.select('div:nth-child(2)');
```
22.query

进行一次query的查询，返回DOM 节点组成的数组。可选地第二参数设置为查询的起点，如不指定则为 document。
```
// 返回dom节点组成的数组
Ext.query('div:nth-child(2)');
```
23.child

基于送入的选择符，不限定深度进行搜索，符合的话选取单个子节点。
```
Ext.fly('elId').child('p.highlight');  // 返回的类型是Ext.Element
Ext.fly('elId').child('p.highlight', true);  // 返回dom节点
```
24.down
基于该选择符，"直接"选取单个子节点。
```
Ext.fly('elId').down('span');  // 返回的类型是Ext.Element
Ext.fly('elId').down('span', true);  // 返回dom节点
```
25.parent

返回当前节点的那个父节点，可选地可送入一个期待的选择符。
```
// 返回父节点，类型是Ext.Element
Ext.fly('elId').parent();
// 返回父节点，类型是html dom
Ext.fly('elId').parent("", true);
// 返回父级节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').parent("div");
```
26.next
获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
```
// 返回下一个侧边节点，类型是Ext.Element
Ext.fly('elId').next();
// 返回下一个侧边节点，类型是html dom
Ext.fly('elId').next("", true);
// 返回下一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').next("div");
```
27.prev
获取上一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
```
// 返回上一个侧边节点，类型是Ext.Element
Ext.fly('elId').prev();
// 返回上一个侧边节点，类型是html dom
Ext.fly('elId').prev("", true);
// 返回上一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').prev("div");
```
28.first

获取第一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
```
// 返回第一个侧边节点，类型是Ext.Element
Ext.fly('elId').first();
// 返回第一个侧边节点，类型是html dom
Ext.fly('elId').first("", true);
// 返回第一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').first("div");
```
29.last
获取最后一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
```
// 返回最后一个侧边节点，类型是Ext.Element
Ext.fly('elId').last();
// 返回最后一个侧边节点，类型是html dom
Ext.fly('elId').last("", true);
// 返回最后一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('elId').last("div");
```
四、DOM操控（DHTML常见的一项任务就是DOM元素的增、删、改、查）

30.appendChild
把送入的元素归为这个元素的子元素。
```
var el = Ext.get('elId1');
// 用id指定
Ext.fly('elId').appendChild('elId2');
// Ext.Element添加
Ext.fly('elId').appendChild(el);
// 选择符组合地添加
Ext.fly('elId').appendChild(['elId2','elId3']);
// 直接添加dom节点
Ext.fly('elId').appendChild(el.dom);
// 添加CompositeElement，一组的div
Ext.fly('elId').appendChild(Ext.select('div'));
```
31.appendTo

把这个元素添加到送入的元素里面。
```
var el = Ext.get('elId1');
// 'elId'添加到'elId2'里面
Ext.fly('elId').appendTo('elId2');
Ext.fly('elId').appendTo(el);  //
    添加到Ext.Element el
```
32.insertBefore
传入一个元素的参数，将其放置在当前元素之前的位置。
```
var el = Ext.get('elId1');	

// dom节点在前面插入
Ext.fly('elId').insertBefore('elId2');
//Ext.Element el在前面插入
Ext.fly('elId').insertBefore(el);
```
33.insertAfter
传入一个元素的参数，将其放置在当前元素之后的位置。
```
var el = Ext.get('elId1');	

// dom节点在后面插入
Ext.fly('elId').insertAfter('elId2');
// Ext.Element el在后面插入

Ext.fly('elId').insertAfter(el);
```
34.insertFirst

可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHelper配置项对象”作为参数传入），总之，这个元素作为当前元素的第一个子元素出现。
```
var el = Ext.get('elId1');	

// 插入的dom节点作为第一个元素
Ext.fly('elId').insertFirst('elId2');
// 插入的Ext.Element作为第一个元素
Ext.fly('elId').insertFirst(el);

// 用DomHelper配置项创建新节点，新节点会作为第一个子元素被插入。
Ext.fly('elId').insertFirst({
	tag: 'p',
	cls: 'myCls',
	html: 'Hi I am the new first child'

});
```
35.replace
用于当前这个元素替换传入的元素。
```
var el = Ext.get('elId1');
// 'elId'去替换'elId2'
Ext.fly('elId').replace('elId2');
// 'elId'去替换'elId1'
Ext.fly('elId').replace(el);
```
36.replaceWith

用传入的元素替换这个元素。参数可以是新元素或是要创建的DomHelper配置项对象。
```
var el = Ext.get('elId1');
Ext.fly('elId').replaceWith('elId2');  // 'elId2'替换掉'elId'.
Ext.fly('elId').replaceWith(el);  //
    'elId1'替换掉'elId'

// 用DomHelper配置项创建新节点，并用该节点换掉‘elId’。
Ext.fly('elId').replaceWith({
	tag: 'p',
	cls: 'myCls',
	html: 'Hi I have replaced elId'
});
```
五、DomHelper配置项

37.createChild
传入一个DomHelper配置项对象的参数，将其创建并加入到该元素。
```
var el = Ext.get('elId');
var dhConfig = {
	tag: 'p',
	cls: 'myCls',
	html: 'Hi I have replaced elId'
};
// 创建新的节点，放到'elId'里面
el.createChild(dhConfig);
// 创建新的节点，居el第一个子元素之前
el.createChild(dhConfig, el.first());
```
38.wrap

创建一个新的元素，包裹在当前元素外面。
```
Ext.fly('elId').wrap(); // div包着elId
// 用新建的一个元素来包着elId
Ext.fly('elId').wrap({
	tag: 'p',
	cls: 'myCls',
	html: 'Hi I have replaced elId'
});
```
六、Html片断

38.insertHtml

插入HTML片断到这个元素。至于要插入的html放在元素的哪里，你可指定beforeBegin, beforeEnd, afterBegin, afterEnd这几种。第二个参数是插入HTML片断，第三个参数是决定是否返回一个Ext.Element类型的DOM对象。
```
Ext.fly('elId').insertHtml(
	'beforeBegin',
	'<p><a href="anotherpage.html'>点击我</a></p>'

); // 返回dom节点
Ext.fly('elId').insertHtml(
	'beforeBegin',
	'<p><a href="anotherpage.html'>点击我</a></p>',
	true

); // 返回Ext.Element
```
39.remove

从DOM里面移除当前元素，并从缓存中删除。.
```
Ext.fly('elId').remove(); //
                        elId在缓存和dom里面都没有
```
40.removeNode

移除document的DOM节点。如果是body节点的话会被忽略。
```
Ext.removeNode(node); // 从dom里面移除(HTMLElement)
```
七、Ajax

41.load

直接访问Updater的Ext.Updater.update()方法（相同的参数）。参数与Ext.Updater.update()方法的一致。
```
Ext.fly('elId').load({url: 'serverSide.php'})
```
42.getUpdater

获取这个元素的UpdateManager。
```
var updr = Ext.fly('elId').getUpdater();
updr.update({
        url: 'http://myserver.com/index.php',
        params: {
            param1: "foo",
            param2: "bar"
        }
});
```
八、事件控制Event Handling

43.addListener/on

为此元素加入一个事件处理函数。on()是其简写方式。简写方式作用等价，写代码时更省力。
```
var el = Ext.get('elId');
el.on('click', function(e,t) {
	// e是一个标准化的事件对象(Ext.EventObject)

	// t就是点击的目标元素，这是个Ext.Element.
	// 对象指针this也指向t
});
```
44.removeListener/un

从这个元素上移除一个事件处理函数。un()是它的简写方式。
```
var el = Ext.get('elId');
el.un('click', this.handlerFn);
// 或
el.removeListener('click', this.handlerFn);
```
45.Ext.EventObject

EventObject呈现了统一各浏览器的这么一个事件模型，并尽量符合W3C的标准方法。
```
// e它不是一个标准的事件对象，而是Ext.EventObject。
function handleClick(e){
    e.preventDefault();
    var target = e.getTarget();
    ...
}

var myDiv = Ext.get('myDiv');
myDiv.on("click", handleClick);
// 或
Ext.EventManager.on('myDiv', 'click', handleClick);
Ext.EventManager.addListener('myDiv', 'click', handleClick);
```
九、高级事件功能

46.委托delegation

要使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依附的逻辑选择：
```
Ext.fly('actions').on('click, function(e,t) {
	switch(t.id) {
		case ''btn-edit':
		// 处理特定元素的事件具体过程
		break;
		case 'btn-delete':
		// 处理特定元素的事件具体过程
		break;
		case 'btn-cancel':
		// 处理特定元素的事件具体过程
		break;
	}
});
```
47.委托化delegate

你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符，用于过滤目标元素，或是往下一层查找目标的子孙。
```
el.on('click', function(e,t) {
    // 执行事件具体过程

}, this, {
    // 对子孙'clickable'有效
    delegate: '.clickable'
});
```
48.翻转hover

这是一个Ext的翻转菜单的实例：
```
// handles when the mouse enters the element
function enter(e,t){
    t.toggleClass('red');
}
// handles when the mouse leaves the element
function leave(e,t){
    t.toggleClass('red');
}
// subscribe to the hover

el.hover(over, out);
```
49.移除事件句柄removeAllListeners

在该元素身上移除所有已加入的侦听器。
```
el.removeAllListeners();
```
50.是否一次性触发single

你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。
```
el.on('click', function(e,t) {
    // 执行事件具体过程
}, this, {
    single: true // 触发一次后不会再执行事件了

});
```
51.缓冲buffer

你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会被启用，但是新处理器句柄会安排在其位置。
```
el.on('click', function(e,t) {
    // 执行事件具体过程

}, this, {
    buffer: 1000 // 重复响应事件以一秒为时间间隔
});
```
52.延时delay

你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。
```
el.on('click', function(e,t) {
    // 执行事件具体过程

}, this, {
    // 延迟事件，响应事件后开始计时（这里一秒）
    delay: 1000 

});
```
53.目标target

你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素，你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。
```
el.on('click', function(e,t) {
    // 执行事件具体过程
}, this, {
    // 遇到里头的第一个'div'才会触发事件
    target: el.up('div')
});
```
十、尺寸&大小

54.getHeight

返回元素的偏移（offset）高度。
```
var ht = Ext.fly('elId').getHeight();
```
55.getWidth

返回元素的偏移（offset）宽度。
```
var wd = Ext.fly('elId').getWidth();
```
56.setHeight

设置元素的高度。
```
Ext.fly('elId').setHeight();
```
57.setWidth

设置元素的宽度。
```
Ext.fly('elId').setWidth();
```
58.getBorderWidth

返回指定边（side(s)）的padding宽度。
```
var bdr_wd = Ext.fly('elId').getBorderWidth('lr');
```
59.getPadding

可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到(l)eft padding +(r)ight padding。
```
var padding = Ext.fly('elId').getPadding('lr');
```
60.clip

保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip()来移除。
```
Ext.fly('elId').clip();
```
61.unclip

在调用clip()之前，返回原始的裁剪部分（溢出的）。
```
Ext.fly('elId').unclip();
```
62.isBorderBox

测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。
```
if (Ext.isBorderBox) {
    //
}
```
十一、定位

63.getX

返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
```
var elX = Ext.fly('elId').getX()
```
64.getY

返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
```
var elY = Ext.fly('elId').getY()
```
65.getXY

返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
```
var elXY = Ext.fly('elId').getXY() // elXY是数组
```
66.setX

返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
```
Ext.fly('elId').setX(10)
```
67.setY

返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
```
Ext.fly('elId').setY(10)
```
68.setXY

返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
```
Ext.fly('elId').setXY([20,10])
```
69.getOffsetsTo

返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
```
var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl);
```
70.getLeft

获取左边的X坐标。
```
var elLeft = Ext.fly('elId').getLeft();
```
71.getRight

获取元素右边的X坐标（元素X位置 + 元素宽度）。
```
var elRight = Ext.fly('elId').getRight();
```
72.getTop

获取顶部Y坐标。
```
var elTop = Ext.fly('elId').getTop();
```
73.getBottom

获取元素的底部Y坐标（元素Y位置 + 元素宽度）。
```
var elBottom = Ext.fly('elId').getBottom();
```
74.setLeft

直接使用CSS样式（代替setX()），设定元素的left位置。
```
Ext.fly('elId').setLeft(25)
```
75.setRight

设置元素CSS Right的样式。
```
Ext.fly('elId').setRight(15)
```
76.setTop

直接使用CSS样式（代替setY()），设定元素的top位置。
```
Ext.fly('elId').setTop(12)
```
77.setBottom

设置元素CSS Bottom的样式。
```
Ext.fly('elId').setBottom(15)
```
78.setLocation

无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。
```
Ext.fly('elId').setLocation(15,32)
```
79.moveTo

无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。
```
Ext.fly('elId').moveTo(12,17)
```
80.position

初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。
```
Ext.fly('elId').position("relative")
```
81.clearPositioning

当文档加载后清除位置并复位到默认。
```
Ext.fly('elId').clearPositioning()
Ext.fly('elId').clearPositioning("top")
```
82.getPositioning

返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。
```
var pos = Ext.fly('elId').getPositioning()
```
83.setPositioning

由getPositioning()返回的对象去进行定位。
```
Ext.fly('elId').setPositioning({
    left: 'static',
    right: 'auto'
})
```
84.translatePoints

送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。
```
// {left:translX, top: translY}
var points = Ext.fly('elId').translatePoints(15,18);

来自：http://blog.csdn.net/jazywoo123/article/details/7865165
```
相关阅读:
指针类型
 集合类型
 VMware打开虚拟机没反应的解决方案(全面汇总)
redis主从｜哨兵｜集群模式
 MYSQL一次千万级连表查询优化
 StackExchange.Redis通用封装类分享
 Redis-五种数据类型解析
 Redis并发问题
 C#委托和事件
 Invoke 和 BeginInvoke 的区别
原文地址：https://www.cnblogs.com/yimu/p/2870086.html

Extjs DOM操作总结[转]

一、获取元素（Getting Elements）

二、CSS元素

三、Dom游历

四、DOM操控（DHTML常见的一项任务就是DOM元素的增、删、改、查）

五、DomHelper配置项

六、Html片断

七、Ajax

八、事件控制Event Handling

九、高级事件功能

十、尺寸&大小

十一、定位