Ext.Component的isVisible()与isHidden()方法差异及文档说明疑问

嘿，我来给你把这俩方法的差异说透，虽然官方文档没做明确说明，但实际开发里这俩的区别还是挺关键的：

• 核心逻辑的反向但不绝对：
  乍一看这俩像是简单的反向判断，但其实不是完全对立的。isVisible() 是判断组件实际是否处于可见状态（包括父容器的影响），而 isHidden() 只检查组件自身的隐藏标记，完全不管父组件的状态。

• 判断范围的差异：

  • isVisible() 是递归检查：它会向上遍历所有父级容器，只要有任何一个祖先容器不可见，这个方法就返回 false。只有当组件自身和所有父容器都处于可见状态时，才会返回 true。
  • isHidden() 是单一组件检查：只看当前组件的 hidden 配置，或者是否通过 hide() 方法设置了隐藏状态，完全不关心父组件是否可见。

• 适用场景不一样：

  • 如果你要确认组件在页面上真的能被用户看到，比如要在组件显示时触发某个交互逻辑，那就用 isVisible()。
  • 如果你只是想知道组件自己有没有被标记为隐藏，比如重置组件状态时只关注它自身的设置，那就用 isHidden()。

举个实际代码例子更清楚：

// 创建一个隐藏的父面板，里面放一个未隐藏的按钮
var parentPanel = Ext.create('Ext.panel.Panel', {
    hidden: true,
    items: [{
        xtype: 'button',
        itemId: 'testBtn',
        text: '测试按钮'
    }]
});

var testBtn = parentPanel.down('#testBtn');
console.log(testBtn.isVisible()); // 输出 false —— 因为父面板隐藏了，按钮实际不可见
console.log(testBtn.isHidden()); // 输出 false —— 按钮自身没有被设置为隐藏

内容的提问来源于stack exchange，提问作者Devendra Haldankar