May 12, 2020, 12:39 AM
Tab close, doesn't show previous tabs
Hi All, or Fabricio,
We have a tab panel to which a user could add up to six or so tabs. In EXT 2.5.3, the previously viewed tab would automatically be displayed when a user closes a tab.
In EXT 5, when a user closes a tab, if it was a tab opened earlier, any tab opened later will be viewable. But if it was a tab opened later, when you close it, any earlier tabs cannot be seen. The tab itself is visible, but the content is not seen. I believe, by viewing the Dev tools, that the content is still loaded in the browser, but the ext code is not making it visible.
Again, open tab 1, then open tab 2. Go back to tab 1, then close it, tab 2 is visible in all its glory.
Open tab 1, then open tab 2, then close tab 2, tab 1 TAB is visible, but content is not visible.
How the tab panel is declared:
We have a tab panel to which a user could add up to six or so tabs. In EXT 2.5.3, the previously viewed tab would automatically be displayed when a user closes a tab.
In EXT 5, when a user closes a tab, if it was a tab opened earlier, any tab opened later will be viewable. But if it was a tab opened later, when you close it, any earlier tabs cannot be seen. The tab itself is visible, but the content is not seen. I believe, by viewing the Dev tools, that the content is still loaded in the browser, but the ext code is not making it visible.
Again, open tab 1, then open tab 2. Go back to tab 1, then close it, tab 2 is visible in all its glory.
Open tab 1, then open tab 2, then close tab 2, tab 1 TAB is visible, but content is not visible.
How the tab panel is declared:
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server"/>
<ext:Viewport runat="server" Border="false" Layout="Fit">
<Items>
<ext:TabPanel ID="mainTabPanel" Border="false" runat="server" >
</ext:TabPanel>
</Items>
<Bin>
</Bin>
</ext:Viewport>
</body>
How we add tabs (name and such are coming from a dataabase):<script type="text/javascript">
var addTab = function (id, url, menuItem, title) {
console.log('url: ' + url);
var mainTabPanel = window.Ext.getCmp("mainTabPanel");
var tabitem = mainTabPanel.getComponent(id);
if (!tabitem) {
var tab = mainTabPanel.insert(mainTabPanel.items.length + 1, {
id: id,
title: title,
closable: true, border: false,
menuItem: menuItem,
loader: {
url: url,
renderer: "frame",
loadMask: {
showMask: true,
msg: "Loading"
}
}
});
}
mainTabPanel.setActiveTab(tab);
}
</script>
Appreciate your help!