ExtJs使用总结超详细教程

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 值。