ExtJS 的 API 功能非常丰富，尤其在 DOM 操作方面，熟练掌握可以大幅减少重复代码。下面这份总结将常用方法按应用场景进行梳理，涵盖从元素获取到事件处理、从 DOM 定位到尺寸控制等常见需求，基本能够覆盖日常开发中九成以上的使用场景。直接对照使用即可，无需每次翻阅文档。
一、获取元素
获取 DOM 节点，Ext 提供了多种方式，适用于不同场景：
1. Ext.get — 最基础的方法，根据 id 获取元素，内部带有缓存机制。用法：var el = Ext.get('myElementId'); 效果与 document.getElementById 相同，但增加了缓存功能，重复获取同一元素时性能更佳。
2. Ext.fly — 如果只是临时使用，不需要缓存，可以用 Ext.fly('myElementId')。底层采用享元模式，整个应用只维护一个对象实例反复复用，节省内存开销，适合链式调用或一次性操作。
3. Ext.getDom — 直接获取原生 DOM 节点。参数可以传入 id 或 DOM 节点：Ext.getDom('elId') 或 Ext.getDom(elDom)。
二、CSS 样式类操作
针对样式类的增删改查，Ext.Element 提供了完整的快捷方法：
4. addClass — 为元素添加一个 class：Ext.fly('elId').addClass('myCls');
5. radioClass — 为当前元素添加指定 class，同时移除所有兄弟节点上的同名 class。适用于单选高亮等场景。
6. removeClass — 移除指定 class。
7. toggleClass — 切换 class（存在则删除，不存在则添加）。重复调用可在添加和删除之间来回切换。
8. hasClass — 判断是否已添加某个 class，返回布尔值。
10. replaceClass — 替换样式：Ext.fly('elId').replaceClass('myClsA', 'myClsB');
11. getStyle — 获取计算后的样式值：Ext.fly('elId').getStyle('color') 或 getStyle('z-index')。
12. setStyle — 批量设置样式，传入一个对象即可：
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});13. getColor — 获取 CSS 颜色值，例如 getColor('color')。
14. setOpacity — 设置透明度：Ext.fly('elId').setOpacity(.45, true); 第二个参数表示是否启用动画效果。
15. clearOpacity — 清除透明度设置。
三、DOM 遍历
遍历 DOM 树是常见操作，Ext 封装得十分便捷：
16. Ext.fly('elId').select('li:nth-child(2n)').addClass('red'); — 使用 CSS 选择器选取子节点。
17. is — 判断当前元素是否匹配某个选择器：
var el = Ext.get('elId');
if (el.is('p.myCls')) {
// 条件成立
}18. findParent — 从当前元素向上查找父节点，直到匹配选择器。可限制深度、是否返回 Ext.Element：Ext.fly('elId').findParent('div', 4, true);
19. findParentNode — 从当前元素的父节点开始向上查找。
20. up — 向上查找，可限制深度：Ext.fly('elId').up('div', 5);
21. select — 在当前元素下按 CSS 选择器选取子节点，返回 CompositeElement。若要从 document 开始查找，使用 Ext.select('div:nth-child(2)')。
22. query — 返回 DOM 节点数组，不限制起始位置。
23. child — 不限制深度，选取第一个匹配的子节点。第二个参数 true 返回原生 DOM：Ext.fly('elId').child('p.highlight', true);
24. down — 查找直接子节点（类似于 first-child 概念）。
25. parent — 获取父节点，可选传入选择器进行过滤。
26. next — 获取下一个兄弟节点（跳过文本节点）。可附带选择器和是否返回 DOM。
27. prev — 获取上一个兄弟节点。
28. first — 获取第一个兄弟节点。
29. last — 获取最后一个兄弟节点。
四、DOM 操作
增删改查是 DHTML 的核心功能，Ext 对此封装得相当全面：
30. appendChild — 将其他元素作为子节点追加进来。参数可以传入 id、Ext.Element、数组甚至 CompositeElement：Ext.fly('elId').appendChild(['elId2','elId3']);
31. appendTo — 反过来，将自己追加到另一个元素内部：Ext.fly('elId').appendTo('elId2');
32. insertBefore — 将自己插入到指定元素之前。
33. insertAfter — 将自己插入到指定元素之后。
34. insertFirst — 作为第一个子元素插入。支持传入 DomHelper 配置对象直接创建新节点：
Ext.fly('elId').insertFirst({
tag: 'p',
cls: 'myCls',
html: 'Hi I am the new first child'
});35. replace — 用当前元素替换传入的元素（当前元素移到目标位置）。
36. replaceWith — 反过来，用传入的元素替换当前元素。同样支持 DomHelper 配置。
五、DomHelper 配置项
37. createChild — 传入 DomHelper 配置，创建新节点并追加到当前元素：
var el = Ext.get('elId');
var dhConfig = {
tag: 'p',
cls: 'myCls',
html: 'Hi I ha ve replaced elId'
};
el.createChild(dhConfig);
// 也可指定插入位置，例如第一个子元素之前
el.createChild(dhConfig, el.first());38. wrap — 创建一个新元素，将当前元素包裹起来。可传入 DomHelper 配置自定义包裹元素。
六、HTML 片段
38. insertHtml — 直接插入 HTML 片段，可指定位置（beforeBegin/beforeEnd/afterBegin/afterEnd）。第三个参数决定是否返回 Ext.Element：
Ext.fly('elId').insertHtml(
'beforeBegin',
'',
true
);39. remove — 从 DOM 中移除元素，并从缓存中删除。
40. removeNode — 静态方法，直接使用 Ext.removeNode(node) 删除指定 DOM 节点（body 节点会被跳过）。
七、Ajax 请求
41. load — 直接使用 Updater 加载内容到元素：Ext.fly('elId').load({url: 'serverSide.php'})
42. getUpdater — 获取该元素的 UpdateManager，之后可以手动调用 update 方法，传入 url 和 params。
八、事件控制
43. addListener/on — 为元素绑定事件。on 是简写形式：
var el = Ext.get('elId');
el.on('click', function(e,t) {
// e 是 Ext.EventObject，t 是目标 Ext.Element
});44. removeListener/un — 移除事件监听。
45. Ext.EventObject — 统合各浏览器的事件对象，支持 preventDefault()、getTarget() 等标准方法。
九、高级事件功能
46. 委托 — 在容器上注册一个事件处理器，通过判断目标 id 来分发：
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) {
// 仅 .clickable 子元素触发
}, this, { delegate: '.clickable' });48. hover — 简化鼠标进入/离开事件的绑定：el.hover(overFn, outFn);
49. removeAllListeners — 移除元素上的所有监听器。
50. single — 配置项：事件只触发一次：{ single: true }
51. buffer — 配置项：设置缓冲时间（毫秒），重复触发时会重置延时，适用于防抖：{ buffer: 1000 }
52. delay — 配置项：每次触发后延迟执行：{ delay: 1000 }
53. target — 配置项：指定一个目标元素，只在事件冒泡过程中遇到该元素时才触发：{ target: el.up('div') }
十、尺寸 & 大小
54. getHeight — 返回 offsetHeight。
55. getWidth — 返回 offsetWidth。
56. setHeight — 设置高度。
57. setWidth — 设置宽度。
58. getBorderWidth — 获取指定边的边框宽度，例如 'lr' 返回左右边框宽度之和。
59. getPadding — 获取指定边的 padding 之和，例如 'lr' 返回左右内边距。
60. clip — 裁剪元素（隐藏溢出部分），配合 unclip() 恢复。
61. unclip — 恢复裁剪前的溢出状态。
62. isBorderBox — 判断元素是否使用 border-box 盒模型。
十一、定位
63. getX / 64. getY / 65. getXY — 获取元素相对于页面的坐标。元素必须在 DOM 树中且 display 不为 none。
66. setX / 67. setY / 68. setXY — 设置元素位置。
69. getOffsetsTo — 计算当前元素与另一个元素之间的偏移量。
70. getLeft / 71. getRight / 72. getTop / 73. getBottom — 获取元素四条边的坐标位置（包含宽高）。
74. setLeft / 75. setRight / 76. setTop / 77. setBottom — 直接通过 CSS 设置 left/right/top/bottom 值。
78. setLocation / 79. moveTo — 将元素移动到页面指定坐标位置。
80. position — 初始化定位，默认为 relative。
81. clearPositioning — 清除定位属性，恢复默认值。
82. getPositioning — 返回包含 CSS 定位信息的对象，可用于后续恢复。
83. setPositioning — 根据 getPositioning 返回的对象设置定位。
84. translatePoints — 将页面坐标转换为元素内部的 left/top 值。
