【问题标题】:extjs 6.5.2 modern - beforeremove, beforeclose, close not firingextjs 6.5.2 现代 - beforeremove,beforeclose,close 不触发
【发布时间】:2018-04-19 14:41:45
【问题描述】:

我注意到tabpanelbeforeremovepanelbeforecloseclose 没有触发。另一方面,destroy 事件运行良好。是否有任何变通方法或不同的事件具有相同的结果?

我在下面的示例中重现了我的观察结果。

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    items: [
        {
            xtype: 'panel',
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen',
            closable: true,
            listeners: {
                beforeclose: function () {
                    console.log('beforeclose');
                },
                close: function () {
                    console.log('close');
                },
                destroy: function () {
                    console.log('destroy');
                }
            }
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ],
    listeners: {
        beforeremove: function () {
            console.log('beforeremove');
        }
    }
});
}
});

只需将示例添加到现代工具包中的sencha fiddle,然后打开浏览器的开发者工具即可。

此外,如果panel 不在tabpanel 内,beforecloseclose 会正常触发。

Ext.create({
xtype: 'panel',
title: 'Panel Title',
iconCls: 'x-fa fa-html5',
height: 400,
width: 400,
bodyPadding: 12,
html: 'Sample HTML text',
renderTo: Ext.getBody(),
listeners: {
    beforeclose: function () {
        console.log('beforeclose');
    },
    close: function () {
        console.log('close');
    }
}
}).close();

更新

-- 这是一个框架错误。所以我可能不得不等待更新。

-- 我接受了 Marco 的回答,因为它解决了我的问题。但这是一个框架错误,应该在下一次更新中修复。

【问题讨论】:

  • 这里的问题是面板假设 closeAction 为“销毁”(默认情况下),所以只有销毁事件被触发。需要检查解决方法。
  • 看看Panel.js关闭函数。 closebeforeclose 应该被解雇。如果没有 tabpanel 容器,他们会这样做。
  • 告诉我你在期待什么。留下这个问题,我只是想知道你的基本要求是什么。据此我可以告诉你解决方法。
  • 因为它是可关闭panels 的一个非常基本的功能。我想创建一个自定义 panel 将是我的最终解决方案。
  • 您可以使用 dataview/tpl 执行类似的功能。

标签: javascript events extjs panel tabpanel


【解决方案1】:

在这里演示:https://fiddle.sencha.com/#view/editor&fiddle/29dj

TL;DR 监听“deactivate”和“removed”事件。

用户点击发生在标签栏 (Ext.tab.Bar) 而不是您的面板上,并且该栏是 Ext.tab.Panel(扩展 Ext.Container)的一部分。 因此,关闭选项卡所调用的方法是 Ext.tab.Panel 的“onItemRemove”,而不是 Ext.Panel 的“关闭”。 这就是你的听众不工作的原因。

使用演示小提琴,您可以看到 Ext.Panel 触发的所有事件,并使用这些事件来做您需要的事情。

编辑

要在关闭之前显示确认消息,这里的小提琴:https://fiddle.sencha.com/#view/editor&fiddle/29hl

【讨论】:

  • 问题是beforeclose 在经典框架上被触发。我开了一张去煎茶的票,我正在等待答案。如果他们没有提出任何问题,我将尝试实施您的解决方法。感谢您的努力。
  • Marco C.deactivate 在我的情况下不起作用,因为当我选择另一个 tab 时它也会被解雇。
  • 对不起,我一直很忙,那“已删除”呢?你想做什么?
  • 显示“您确定要关闭标签页吗?”消息,以便在用户不想关闭时取消 tab 关闭。我认为只有panelbeforeclosetabpanelbeforeremove 对我有用。
  • 我用另一个显示确认消息的小提琴更新了我的答案,它不使用事件,而是一个简单的覆盖来完成这项工作。希望有帮助!
猜你喜欢
  • 1970-01-01
  • 2018-05-05
  • 2019-02-19
  • 1970-01-01
  • 2019-02-26
  • 2020-12-01
  • 2018-02-20
  • 2019-11-21
  • 1970-01-01
相关资源
最近更新 更多