[OPEN] [#1788] TabPanel - BeforeTabClosed event handler not invoked after upgrading Ext.NET to v 5.0.0

Hello,
I have upgraded Ext.NET from version 2.5.2 to version 5.0.0 in Asp.NET application

One of my pages has a TabPanel control defined in the markup as follows:

Code:

---

                <ext:Container ID="cockpitMainContainer" runat="server" Layout="Fit" Region="Center"  Hidden="false">
                    <Items>
                        <ext:TabPanel ID="CockpitMainTabPanel" runat="server" >
                            <Defaults>
                                <ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
                            </Defaults>
                            <Items>
                            </Items>
                            <Listeners>
                                <TabChange Handler="cockpitController.tabChanged(#{CockpitMainTabPanel}.getActiveTab());"></TabChange>
                                <BeforeTabClose Fn="cockpitController.beforeTabClose"></BeforeTabClose>
                            </Listeners>
                        </ext:TabPanel>
                    </Items>
                </ext:Container>

---

The several tabs are added in the "CockpitMainTabPanel" via javascript as follows:

Code:

---

        var pageCockpit = Ext.create('Ext.panel.Panel', {
          id: 'PageCockpitPanel_' + page.ordinal,
          title: page.title,
          items: portal,
          pageOrdinal: page.ordinal,
          closable: true,
          border: 0,
          cls: 'cockpit-page-panel',
          defaults: { columnWidth: 0.5, layout: 'anchor', border: 0 }
        });
        Ext.getCmp('CockpitMainTabPanel').add(pageCockpit);

---

When any of the tabs is deleted by clicking on the "X" button , the "cockpitController.beforeTabClose" (handle of the event) function is no longer invoked and the tab is immediately closed. The handle returns true if it is allowed to delete the tab, otherwise returns false. It was correctly invoked with Ext.NET 2.5.2.

I tried also to specify an event handler in the markup with the "Handler" tag instead of the "Fn" tag, but it is never invoked as well.

Can you give me help, please?

thanks,

Thanks for the report and sample. We are investigating.

Hello @Peter.Treier!

I am afraid this is an issue and it has been there at least since Ext.NET 4. As these events are Ext.NET-specific (they are not available in Ext JS alone), some changes to how Tab Panel works while closing tabs have affected and nullified the effect of the events.

We have logged the issue under #1788 and we'll post an update here as soon as we get this fixed.

As workarounds for the issue, you can either:

- add the BeforeClose listeners to each panel you add to the tab panel, associating it to the handler you currently use in the TabPanel component.
- use this override that attempts to wire up again the tab panel's BeforeTabClose and TabClose events:

Code:

---

Ext.define('gh1788', {
    override: 'Ext.tab.Bar',
    closeTab: function (toClose) {
        var me = this,
            tabPanel = me.tabPanel,
            validTab = !Ext.isEmpty(toClose) && !Ext.isEmpty(toClose.card);

        if (validTab) {
            if (tabPanel.fireEvent("beforetabclose", me, toClose.card) === false) {
                return false;
            }
        }

        retVal = me.callParent(arguments);

        if (validTab && retVal !== false) {
            tabPanel.fireEvent("tabclose", this, toClose.card);
        }

        return retVal;
    }
})

---

If you use this override, please let us know if it works for you, we'd appreciate as much testing and feedback as possible before we apply this fix to the code. This version is much simpler than the current "unwired" override in the code, so there should be situations where it does not work as expected.

Hope this helps; and again, we're going to post a follow-up here anyway when we apply the fix to Ext.NET.

Hello Fabricio,
many thanks for the quick answer. I tried both the possibilities, and both are correctly working.

At the end I decided to add, via javascript, the listener to the "beforeclose" event to each tab created and added to the tabpanel, instead of using the proposed override.
Anyway, I've seen that the override in my situation solves the problem too.

Thanks again for the support.

Hello @Peter.Treier!

Thanks for the feedback, and glad the proposed solutions worked for you!

Notwithstanding, we are going to post an update here as soon as we get the fix to Ext.NET sources, we may need further testing as the override will mean other changes to the code.