Ext JS：窗口子组件隐藏事件

Posted 2023-02-26

【中文标题】Ext JS：窗口子组件隐藏事件

【英文标题】：Ext JS: Window child component hide event

【发布时间】：2014-10-22 23:33:58

【问题描述】：

我有一个包含多个子组件的窗口（示例仅包含一个面板）。当我隐藏这个窗口时，我希望子组件做一些处理。当父组件隐藏时，子组件是否可以监听事件？我尝试使用 hide、disable 和 deactivate，但都没有触发。

这是示例代码和我正在使用的Fiddle：

var myPanel = Ext.create('Ext.panel.Panel', 
  title: 'My Panel'
);
myPanel.on('afterrender', function() 
    myPanel.el.on('hide', function() 
        alert('el hidden');
    , this);
, this);
myPanel.on('hide', function()  alert('hidden'); , this);
myPanel.on('deactivate', function()  alert('hidden'); , this);
myPanel.on('disable', function()  alert('hidden'); , this);

var myWindow = Ext.create('Ext.window.Window', 
  height: 300,
  width: 300,
  items: [myPanel],
  closeAction: 'hide'
);

var button = Ext.create('Ext.button.Button', 
  text: 'Toggle Window',
  renderTo: Ext.getBody()
);
button.on('click', function() 
  if (myWindow.isVisible()) 
    myWindow.hide();
  
  else 
    myWindow.show();
  
, this);

当窗口被隐藏时，我想进入事件监听器。我什至开始尝试获取 DOM 元素，但是没有隐藏这样的事件。我意识到我可以从 Window 控制处理，但我宁愿让每个组件监听一个事件并自主处理自己。

有什么想法吗？

【参考方案1】：

据我所知，您不能直接监听另一个组件的事件，尽管您可以在控制器中进行一些处理并完成此操作。 与您提出的问题最相似的方法是在父组件中侦听隐藏事件，并在子组件中触发相同的事件。 -工作小提琴： https://fiddle.sencha.com/#fiddle/c74 您可以迭代所有孩子并做您需要的事情。

【讨论】：

是的，我希望不要这样做，因为我必须认识到窗口内的所有孩子/在那里管理他们......但我认为这是我可以采取的唯一方法.谢谢。

虽然我最终将代码重构为不依赖于隐藏/显示，但我接受了这个作为答案。